Question

我想在$rootScope中存储变量。当我有这样的结构时，一切正常，第二个div显示值：

<html ng-app>
  ...
  <body>
    <button ng-click="$rootScope.pr = !$rootScope.pr"></button>
    <div ng-class="{some:$rootScope.pr}">{{$rootScope.pr}}</div>
  </body>

但是当我有这样的结构时：

<body>
    <div class="root-scope-value-1">{{$rootScope.mobileMenuCollapsed}}</div>
    <div class="content-wrapper" ng-controller="MainController">
        <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <div class="root-scope-value-2">{{$rootScope.mobileMenuCollapsed}}</div>
                    <button ng-click="$rootScope.mobileMenuCollapsed = !$rootScope.mobileMenuCollapsed">

类root-scope-value-2的div显示来自$rootScope.mobileMenuCollapsed的值，但是具有类root-scope-value-1的div在DOM上没有显示。为什么这样？

Answer 1

您不必在视图中使用$rootScope，范围隐式绑定到视图（即使在controller As语法的情况下，别名也会成为$scope上的属性具有控制器实例引用的值）。除隔离范围（$scope.$new()）之外的所有范围（$scope.$new(true)）都最终从rootscope继承，因此您将在范围内自动获得rootScope上可用的属性。所以这里你的控制器MainController的范围是从rootScope继承的。

<强> Plnkr

作为一种更好的做法，总是将属性放在rootcope上的对象上（如在plunker中），这样当您从子范围对属性（rootScope上的对象的属性）进行任何更改时，更改会得到反映在父母身上也是如此，因为他们都指向相同的参考。

为什么ng-bind没有显示ng-click设置的rootScope值

1 个答案: