10

在我的 rootscope 中，我有一个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;
    };
}
4

2 回答 2

24

在 AngularJS 中，$scopes 原型继承自它们的父作用域，一直到$rootScope. 在 JavaScript 中，原始类型会在孩子更改它们时被覆盖。因此，当您$scope.visible在其中一个控制器中进行设置时，$rootScope永远不会触及 on 属性，而是将一个新visible属性添加到当前范围。

在 AngularJS 中，作用域上的模型值应该总是“有一个点”，这意味着是对象而不是基元。

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

var otherCtrl = function($scope, $rootScope){
  $scope.showDiv = function () {
    $rootScope.visible = true;
  };
}
于 2013-02-27T19:57:01.633 回答
1

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

如果可见确实在 rootscope 中，您可以使用 $rootScope.visible 而不是 $scope.visible，但这有点麻烦。

一种选择是在指令中包含“otherCtrl”代码部分（无论如何您都应该这样做），然后将指令范围双向绑定到父范围，您可以在此处阅读。这样指令和页面控制器都使用相同的范围对象。

为了更好地调试您的 $scope，请尝试使用 Angular 的 Chrome 插件，称为Batarang。这让您实际上遍历所有范围并查看为您布置的模型，而不是仅仅希望您在正确的位置寻找。

于 2013-02-27T19:58:24.187 回答