从不同的控制器修改$ rootscope属性

Question

在我的rootcope中,我有一个visible控制div可见性的属性

app.run(function ($rootScope) {
    $rootScope.visible = false;
});

示例HTML:

<section ng-controller='oneCtrl'>
    <button ng-click='toggle()'>toggle</button>
    <div ng-show='visible'>
        <button ng-click='toggle()'>&times;</button>
    </div>
</section>

控制器:

var oneCtrl = function($scope){
    $scope.toggle = function () {
        $scope.visible = !$scope.visible;
    };
}

上面的部分工作正常,元素显示或隐藏没有问题.现在在不同部分的同一页面中,我尝试更改visible变量以显示div,但它不起作用.

<section ng-controller='otherCtrl'>
    <button ng-click='showDiv()'>show</button>
</section>

控制器:

var otherCtrl = function($scope){
    $scope.showDiv = function () {
        $scope.visible = true;
    };
}

Answer 1

在AngularJS中,$scopes原型继承自其父范围,一直到$rootScope.在JavaScript中,当孩子改变它们时,原始类型会被覆盖.因此,当您$scope.visible在其中一个控制器中设置时,$rootScope从未触及过属性,而是将新visible属性添加到当前范围.

在AngularJS中,范围上的模型值应始终"有一个点",这意味着是对象而不是基元.

但是,您也可以通过注入来解决您的问题$rootScope:

var otherCtrl = function($scope, $rootScope){
  $scope.showDiv = function () {
    $rootScope.visible = true;
  };
}