I have a page with multiple controllers, one of the controller is being used in 2 different divs within the same page. I am not sure if it is a scope issue or I just miss something in my code.
here is the plunkr http://plnkr.co/edit/IowesXE3ag6xOYfB6KrN?p=preview
I want to hide the textbox when the user clicks on 'Savings' link, display the box when clicking on 'Cost' link.
Same controller, but declared twice. therefor - two scopes.
Normally the solution is to move the ng-controller declaration one dom level higher (in your case, to the body element. once only), and have it only once. Otherwise, look into angular services.
see updated plunkr: http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p=preview
Every time you use ng-controller, you make a new instance of said controller, with it's own scope. If you set subCCtrl on the body tag (or a new parent), and remove it from the two divs it is currently on, it works for me.
Other solutions you might want to look in to are by keeping "hideThisBox" on the root scope, broadcasting an event when clicking on save or by keeping it in a service.
You need to make some changes in controller and view.
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="angular.js@1.0.x" 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>
I would recommend that you read up on Javascript scope. The issue with your code was the scope of ng-controllers.
You already got your answer i guess, but for those who will come next here is some tips ^^ (hope it will hep):
ng-controller="myCtrl"
will set a new instance of the "myCtrl" controller, with i'ts own scope
The used scope will be the one of the firt div's controller it means that if you have something like:
<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>
Thats just a few easy tips and you will find more usefull ones on SO, or google, but anyway, if it can help some of you it will be cool.
