范围如何在多个控制器之间达到角度?

时间:2013-09-02 14:39:23

标签: javascript angularjs

我有一个带有两个控制器,帖子和ctrl的角度应用程序。我还使用ng-if来隐藏/显示几个元素。

Ctrl-controller将值$ scope.age设置为true,如果我在Posts-controller中设置age = true,则触发ng-if-things,现在在重新加载页面之前它们不会被触发。为什么不呢,我该怎么办呢?

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

1 个答案:

答案 0 :(得分:1)

ngController指令创建一个新范围,该范围从父范围继承。您的内部ngController声明创建了一个新范围,您可以在其中访问父范围的成员,但任何修改都应用于当前范围(对于string,int,boolean类型为true),所以

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

如果需要处理此方案,则应使用.表示法或对象。所以年龄应该是像

这样的对象

$scope.age={overage:true};

并且相应的绑定会受到影响,如

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

使用age时。

请完成此https://github.com/angular/angular.js/wiki/Understanding-Scopes