Mam stronę z wieloma kontrolerami, jeden z kontrolerów jest używany w 2 różnych elementach div na tej samej stronie. Nie jestem pewien, czy jest to problem z zasięgiem, czy po prostu brakuje mi czegoś w moim kodzie.Kontrolery wielu Angularów na jednej stronie
oto plunkr http://plnkr.co/edit/IowesXE3ag6xOYfB6KrN?p=preview
chcę ukryć pole tekstowe, gdy użytkownik kliknie na link „oszczędnościowy”, wyświetli okno po kliknięciu na „koszt” link.
każdym użyciu NG-kontroler, zrobić nową instancję wspomnianego kontrolera, z jego własnym zakresie. Jeśli ustawisz subCCtrl w tagu body (lub nowym rodzicu) i usuniesz go z dwóch div, które jest aktualnie włączone, działa dla mnie.
Inne rozwiązania, na które możesz chcieć polegać, to zachowanie "hideThisBox" w zakresie głównym, rozgłaszanie zdarzenia po kliknięciu przycisku save lub zatrzymaniu go w usłudze.
Ten sam kontroler, ale zadeklarowany dwukrotnie. do tego - dwa zakresy.
Zwykle rozwiązaniem jest przeniesienie deklaracji kontrolera ng na poziom o jedną jednostkę wyższą o (w twoim przypadku do elementu karoseryjnego: tylko raz:), i to tylko raz. W przeciwnym razie spójrz na usługi kątowe.
zobaczyć zaktualizowaną plunkr: http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p=preview
Musisz dokonać pewnych zmian w kontrolerze i widoku.
var app = angular.module('plunker', []);
app.controller('subCCtrl', function($scope) {
$scope.hideThisBox = false;
$scope.update = function(label) {
if (label == 'Cost')
$scope.displaybox = true;
else
$scope.displaybox = false;
}
});
app.controller('subACtrl', function($scope) {
});
app.controller('subBCtrl', function($scope) {
});
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="subCCtrl" class="row-fluid">
<div class="span6">
<a href="#" ng-click='update("Cost");displaybox=true;'>Cost</a>
<br />
<a href="#" ng-click='update("Savings");displaybox=fasle;'>Savings</a>
<br />
</div>
<hr />
<div ng-controller="subACtrl">Do stuff that uses subACtrl</div>
<div ng-controller="subBCtrl">Do stuff that uses subBCtrl</div>
<hr />
<div ng-controller="subCCtrl" class="row-fluid">
<div class="span3">
<label>If click on 'Savings', hide below box: </label>
</div>
<div ng-hide="hideThisBox" class="span6">
<input type="text" ng-model="test2" ng-show="displaybox"/>
</div>
</div>
</div>
</body>
</html>
Polecam lekturę zaległości w zakresie Javascript. Problem z kodem był w zakresie ng-controllers.
macie już odpowiedź Chyba, ale dla tych, którzy przyjdą następne tutaj jest kilka wskazówek ^^ (mam nadzieję, będzie to HEP):
ng-controller="myCtrl" wyznaczy nową instancję „myCtrl "kontroler z I'ts własnym zakresie
zakres używane będzie jednym z kontrolera firt div oznacza to, że jeśli masz coś takiego:
<div id="maindiv" ng-controller="myCtrl> <div id="subdiv1"> <div></div> <div> <div>some text</div> </div> </div> <div id="subdiv2" ng-controller="myCtrl"> <div> <span>-</span> <span>so</span> <span>this</span> <span>is</span> <span>a</span> <span>subdiv</span> <span>.</span> </div> </div> </div> </div>
To tylko kilka prostych wskazówek, a znajdziesz więcej przydatnych na SO, lub Google, ale w każdym razie, jeśli to może pomóc niektórym z was, będzie fajnie.