Using ng elements outside of an ng controller
I am inexperienced with angular.
I am using angular to create a series of nested divs (forms) in a web page. The top div has ng-controller="controllername"
as an attribute. Inside the nested divs is a div with ng-show="showvar"
as an attribute.
It looks like this.
<div class="page">
<div ng-controller="controllername">
<div ng-show="showvar">Hidden Stuff</div>
</div>
</div>
When I execute functions on showvar
to make this true, the div appears (and disappears when false) as intended.
I also have a completely separate div 'out' the original nest divs with the ng-controller attribute. So there is no ng-controller attribute in this separate hierarchy. BUT I have nested another div inside with an attribute ng-show="showvar"
.
Updated HTML structure as such
<div class="page">
<div ng-controller="controllername">
<div ng-show="showvar">Hidden Stuff</div>
</div>
<div class="seperate">
<div ng-show="showvar">More Hidden Stuff</div>
</div>
</div>
On page load, both divs with ng-show="showvar"
in separate sockets are hidden since ng-hide
angular is added. When I execute functions on showvar
after the page has loaded, to make this true, only the div inside the div is displayed ng-controller
.
I (think I) understand that this is because ng elements are evaluated on page load (and added with ng-hide, even outside the controller?), But only ng elements in a div with an ng-controller attribute are evaluated when functions are executed after loading the page. Is it correct?
How can I get another ng-show to evaluate the "outer" from the ng-controller div?
I thought one option was to add an ng controller to the generic "page" div instead of the nested div. But what other options do I have?
EDIT: I also tried just adding ng-controller="controllername"
in a separate div. I think angular is "ignoring" the duplicate ng controller div?
source to share
The problem is what showvar
is in the scope of your controller, the second use is showvar
not in that scope.
What you need to do is make sure the variable is available where needed.
Let's say you add a variable to parentController (you don't have it in your example, so I'll add it)
<div class="page" ng-controller="parentController">
<div ng-controller="controllername">
<div ng-show="showvar">Hidden Stuff</div>
</div>
<div class="seperate">
<div ng-show="showvar">More Hidden Stuff</div>
</div>
</div>
app.controller('ParentController', function($scope){
$scope.showvar = false;
});
the problem is when you set showvar to true in your controller controllername
, it will set it in innerscope and not external. After making sure you have the correct volume by accessing it through another object, you should be safe.
So try like this:
<div class="page" ng-controller="parentController">
<div ng-controller="controllername">
<div ng-show="obj.showvar">Hidden Stuff</div>
</div>
<div class="seperate">
<div ng-show="obj.showvar">More Hidden Stuff</div>
</div>
</div>
app.controller('ParentController', function($scope){
$scope.obj = {
showvar: false
}
});
source to share
Your problem is that you ended up with 2 showvar's: one in the "controllername" scope and one in the application scope (since you have an ng-app declaration somewhere in your html parent "page", you're done).
When you load your page, you get the "showvar" in the controller scope for the first div, and for the "detached" you get the "showvar" variable in the application scope, which doesn't exist, so it resolves to "false" (even though angular declares it for you in the application area, and you can even change its value later).
When you change the value of "showvar" in the controller scope, it does not change the value in the application scope, making the "separate" div permanently hidden =)
source to share