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中，$scope原型继承自其父范围，一直到$rootScope。在JavaScript中，当孩子更改它们时，原始类型会被覆盖。因此，当您在其中一个控制器中设置$scope.visible时，$rootScope上的属性从未被触及，而是将新的visible属性添加到当前范围。

在AngularJS中，范围上的模型值应始终“有一个点”，意思是对象而不是基元。

但是，您也可以通过注入$rootScope：

来解决问题

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

Answer 2

您对$ scope的概念有多熟悉？它根据您的代码向我看，您在两个不同的范围内维护两个名为“visible”的独立$ scope变量。您的每个控制器都有自己的范围吗？通常就是这种情况，在这种情况下，当你在不同的控制器中执行$ scope.visible = true时，你实际上正在编辑名为“visible”的不同变量。

如果可视化真的在rootcope中你可以做$ rootScope.visible而不是$ scope.visible，但这有点乱。

一个选项是在指令中使用“otherCtrl”代码部分（您可能应该这样做），然后将指令范围双向绑定到父作用域，您可以read up on here 。这样，指令和页面控制器都使用相同的范围对象。

为了更好地调试$ scope，请尝试使用名为Batarang的Angular Chrome插件。这让你实际遍历所有的范围，看看为你准备的模型，而不仅仅是希望你在正确的位置。

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

2 个答案: