javascript - example - Controladores multiples angularjs en una pagina
plunker angularjs editor (5)
Cada vez que utiliza ng-controller, crea una nueva instancia de dicho controlador, con su propio alcance. Si establece subCCtrl en la etiqueta del cuerpo (o un nuevo padre), y la elimina de los dos divs en los que está actualmente, funciona para mí.
Otras soluciones que quizás desee consultar son mantener "hideThisBox" en el alcance de la raíz, transmitir un evento al hacer clic en guardar o mantenerlo en un servicio.
Tengo una página con varios controladores, uno de los controladores se está utilizando en 2 divs diferentes dentro de la misma página. No estoy seguro de si es un problema de alcance o simplemente me olvido de algo en mi código.
Aquí está el plunkr http://plnkr.co/edit/IowesXE3ag6xOYfB6KrN?p=preview
Quiero ocultar el cuadro de texto cuando el usuario haga clic en el enlace ''Ahorros'', muestre el cuadro al hacer clic en el enlace ''Costo''.
Le recomendaría que lea sobre el alcance de Javascript. El problema con su código era el alcance de ng-controllers .
Mismo controlador, pero declarado dos veces. Por lo tanto - dos alcances.
Normalmente, la solución es mover la declaración del controlador ng un nivel dom más alto (en su caso, al elemento del cuerpo, solo una vez ) , y tenerlo solo una vez. De lo contrario, mira en servicios angulares.
ver plunkr actualizado: http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p=preview
Necesitas hacer algunos cambios en el controlador y en la vista.
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>
Supongo que ya tienes una respuesta, pero para los que vendrán a continuación hay algunos consejos ^^ (espero que te ayuden):
ng-controller="myCtrl"establecerá una nueva instancia del controlador "myCtrl", con su propio alcanceEl alcance utilizado será el del controlador de firt div, lo que significa que si tiene algo como:
<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>
- Subdiv1 tendrá el mismo alcance que maindiv
- Pero Subdiv2 tendrá su propia instancia del alcance del controlador myCtrl .
- De una manera global, el alcance de Subdiv2 debería haberse erigido en datos del alcance de maindiv.
Eso es solo unos pocos consejos fáciles y encontrará más útiles en SO o google, pero de todos modos, si puede ayudar a algunos de ustedes, será genial.