为什么ng绑定不't显示通过ng单击设置的rootScope中的值

why ng-bind doesn't show values from rootScope set by ng-click

本文关键字：ng 设置 单击 rootScope 显示 绑定 为什么      更新时间：2023-09-26

我想在$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上方）则不显示。为什么会这样？

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

Plnkr

作为一种更好的做法，总是将对象的属性放在rootscope上（如plunker中），这样当您从子作用域对属性（rootscope上对象的属性）进行任何更改时，这些更改也会反映在父作用域上，因为它们都指向同一个引用。

相关文章：