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

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添加到控制器中。