How does the scope reach between multiple controllers in angular?

Question

I have an angular app with two controllers, posts and ctrl. I also use ng-if to hide/show a couple of elements.

The Ctrl-controller sets the value $scope.age to true, If I set age=true in the Posts-controller, ng-if-things get triggered, now they won't get triggered until I reload the page. Why not and what should I do about it?

<body ng-controller="Posts">
    <div class="age red" ng-if="!(age)">
        <form ng-submit="submit()" ng-controller="Ctrl">
            <div class="pair">
                <label for="yes">Ja, jag har fyllt 20 år</label>
                <input name="yes" type="checkbox" required>
            </div>
            <input type="submit" value="Gå vidare">
        </form>
    </div>
    <div ng-if="age">
            <form class="quiz" ng-class="input"> <label class="first">Dofta på glöggen. Hur doftar Blossa 13?</label>
                ...
            </form>
        </div>

        <section class="{{post.type}}" ng-repeat="post in posts">
           ...
        </section>
    </div>
</body>

Javascript

function Posts($scope, $http) {

    $http.get('/getposts')
    .success(function(data, status, headers, config) {
        $scope.posts = data;
    })
    .error(function(){
        console.log('ajax failed');
    });

    $scope.age = localStorage.getItem('age');
}
function Ctrl($scope) {
    $scope.submit = function() {
        localStorage.setItem('age', true);
        $scope.age = true;
        console.log($scope.age);
    };
}

Ctrl is a terrible name for a controller

Phillip Copley
– Phillip Copley

2016-07-13 13:32:22 +00:00
Commented Jul 13, 2016 at 13:32 — Phillip Copley
– Phillip Copley, Commented Jul 13, 2016 at 13:32

Chandermani · Accepted Answer · 2013-09-02 14:49:42Z

1

ngController directive creates a new scope, which inherits from the parent scope. Your inner ngController declaration creates a new scope, where you can access the members of parent scope but any modification gets applied to current scope (true for string, int, boolean types), so

$scope.age = true;  //Creates a new property on the current scope.

You should use the . notation or object if you need to handle this scenario. So age should be a object like

$scope.age={overage:true};

and the corresponding binding gets affected like

<div class="age red" ng-if="!(age.overage)">

whereever age is used.

Please go through this https://github.com/angular/angular.js/wiki/Understanding-Scopes

answered Sep 2, 2013 at 14:49

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How does the scope reach between multiple controllers in angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related