using ng elements outside of ng-controller

Question

I am inexperienced with angular.

I am using angular to create a series of nested divs (a form) on a webpage. The top div has ng-controller="controllername" as an attribute. Within 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 perform functions on showvar to make it true, the div appears (and disappears when false) as intended.

I also have a completely separate div 'outside' the the original nest of divs with the ng-controller attribute. As such, there is no ng-controller attribute in this seperate hierarchy BUT I have nested another div inside with the ng-show="showvar" attribute.

Updated HTML structure is 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>

When the page loads, both divs with ng-show="showvar" in the separate nests are hidden as ng-hide has been appended by angular. When I perform functions on showvar after the page load to make it true, only the div within the ng-controller div gets shown.

I (think I) understand this is because the ng elements are evaluated at page load (and appended with ng-hide, even outside the controller?) but only the ng elements within the div with the ng-controller attribute are evaluated when functions are performed after page load. Is this correct?

How can I get the other ng-show to be evaluate 'outside' of the ng-controller div?

I was thinking one option is to append ng-controller to the overall 'page' div instead of the nested div. But what other options do I have?

EDIT: I also tried simply adding ng-controller="controllername" to the separate div. I guess angular 'ignores' the duplicate ng-controller div?

Is it essential to have your other div outside? Note that you can make it appear to be outside with css, e.g. `position:absolute;`. — Florian Gl, Sep 01 '14 at 13:49
Yes, position:absolute is the issue im trying to resolve by having a separate div — myol, Sep 01 '14 at 14:11
You could inject `$rootScope` to create a variable for the whole page. — Florian Gl, Sep 01 '14 at 14:16
mmmn I would rather not have a global variable like that, I get the impression they are frowned upon in angular — myol, Sep 02 '14 at 12:11

score 1 · Answer 1 · answered Sep 01 '14 at 13:53

Your issue here is that you ended with 2 "showvar" variables: one within the "controllername" scope and another one on the app scope (as you have a ng-app declaration somewhere in your html parent of the "page" div).

When you load your page, you get the value of "showvar" in the controller scope for the first div, and for the "separate" one, you get the "showvar" variable in the app scope, which doesn't exist, therefore it is resolved to "false" (even though angular declares it for you in your app scope and you can even modify its value later).

When you change the value of "showvar" in the controller scope, it doesn't change the one in the app scope, making the "separate" div stay hidden forever =)

Thankyou for explaining the point of angular resolving the elements on page load — myol, Sep 01 '14 at 13:55
I appreciate your explanation, hence the upvote. However @red-X provided a solution and demo, so I felt it was justified to accept his answer — myol, Sep 02 '14 at 12:13

red-X · Accepted Answer · 2014-09-01T13:59:56.433

The problem your facing is that the showvar resides in your controller's scope, your second usage of the showvar is not within that scope.

What you need to do is make sure the variable is available where needed.

Say you add the variable to the parentController (you don't have one in your example so I'll add one)

<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;
});

problem with this is when you set showvar to true within your controllername controller it will set it in the innerscope and not the outer. When making sure you have the right scope by accessing it through another object you should be safe.

So try it 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
  }
});

Quick demo

using ng elements outside of ng-controller

2 Answers2