Question

我有一个切换管理员和客户端模式的按钮。我把它放在了rootcope上，所以我可以随处访问它。

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

我已经看了这个型号。但什么都没发生。知道什么可能是错的吗？

.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。

一定有问题

Answer 1

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

Angular中的范围是典型的。如果在当前作用域中找不到属性，则它会在该作用域的父级中查找具有相同名称的属性，依此类推，直到达到$rootScope。因此，当您的视图初始化时，projectMode似乎是您在$rootScope上初始化它的任何内容。

但是，只要更改projectMode的值，它就会在名为projectMode的控制器范围上创建一个新值，该值与$rootScope.projectMode不同。因此，有意义的是$watch未被触发... $rootScope值没有变化，只有控制器范围的值正在变化。

如果您想要解决此问题，只需将HTML中的projectMode更改为$root.projectMode即可。（HTML中的$root是您引用$rootScope的方式。）

Answer 2

$ watch有一个鲜为人知的第三个选项，它检查对象的相等性而不是对象引用。将其设置为true。所以试试这个，

$rootScope.$watch('projectMode', function(){
 ...your stuff here
}, true);

Answer 3

试试这个 - 我也建议运行JSLint

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

      $rootScope.projectMode = 'Client';
      var current = '';
      var replace = '';
      var newUrl = '';
      var path = '';

      $rootScope.$watch('projectMode', function(){
        path = $location.path();
        if($rootScope.projectMode === 'Client'){
          current = 'client';
          replace = 'admin';
        }else{
          current = 'client';
          replace = 'admin';
        }
        newUrl = path.replace(current, replace);
        $location.url(newUrl);
      })

    }])

我还建议使用Angular的pub子模式，并为消息提供服务监视你可以尝试使用$ rootScope。$ broadcast和你的服务$ rootScope。$ on然后改变你的位置

Answer 4

Trick对我不起作用 - 我必须在更改变量后应用rootScope：

    //Change rootScope-Varible to break
    $rootScope.dbsynchstat = "break";
    //Apply to Scope
    $rootScope.$apply();

之后我可以在任何我希望的控制器中执行类似的操作：

$rootScope.$watch('dbsynchstat', function(){
    if($rootScope.dbsynchstat == 'break'){
        init();
    }   
}, true);

不要忘记将$ rootScope添加到您的控制器中。

$ watch on rootscope不工作，棱角分明

4 个答案: