javascript - $watch on rootscope 不起作用，有 Angular

我有一个按钮可以切换管理员和客户端模式。我已经把它放在 rootscope 中，所以我可以在任何地方访问它。

我正在使用 angular-ui directive 进行切换。

我在这个模型上放了一块 watch 。但什么也没有发生。知道有什么问题吗？

.run(['$rootScope', '$state', '$stateParams', '$location',
     function ($rootScope, $state, $stateParams, $location) {

         $rootScope.projectMode = 'Client';

         $rootScope.$watch('projectMode', function(){
             var path = $location.path();
             alert("fire") //Only fire ones when the app starts
             if($rootScope.projectMode === 'Client'){
                 var current = 'client'
                 var replace = 'admin'
             } else {
                 var current = 'admin'
                 var replace = 'client'
             }
             var newUrl = path.replace(current, replace)
             $location.url(newUrl);
         })

    }])

这是我的看法。

<div class="btn-group">
  <button type="button" class="btn btn-default"  ng-model="projectMode" btn-radio="'Client'">Klient</button>
  <button type="button" class="btn btn-default"  ng-model="projectMode" btn-radio="'Admin'">Admin</button>
</div>

btn-radio 是用于切换的 angular-ui 指令。

我已经检查过 $rootScope.projectMode 正在改变。所以 $watch 一定有问题。

最佳答案

真正的问题是您 View 中的 projectMode 与 projectMode 上的 $rootScope 不同。这是人们在 Angular 中遇到的常见问题。

Angular 中的作用域是原型(prototype)。如果在当前作用域中找不到属性，则它会在该作用域的父级中查找具有相同名称的属性，依此类推，直到到达 $rootScope 。因此，当您的 View 初始化时， projectMode 可能是您在 $rootScope 上将其初始化的任何内容。

但是，一旦更改 projectMode 的值，它就会在名为 projectMode 的 Controller 作用域上创建一个新值，该值与 $rootScope.projectMode 不同。所以，你的 $watch 没有被触发是有道理的...... $rootScope 值没有改变，只有 Controller 范围的值在改变。

如果您想修复它，只需将 HTML 中的 projectMode 更改为 $root.projectMode 即可。 ( HTML 中的 $root 是您引用 $rootScope 的方式。)

关于javascript - $watch on rootscope 不起作用，有 Angular ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21731666/