$ часы на корнеплодах не работают, угловые

Question

У меня есть кнопка, которая переключает режим администратора и клиента. Я положил его на корнеплод, чтобы получить доступ к нему повсюду.

Я использую 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 является директива угловой пользовательский интерфейс для переключения.

Я проверил, что меняется $rootScope.projectMode. Так должно быть что-то не так с $watch.

Answer 1

реальная проблема заключается в том, что projectMode на ваш взгляд, не то же самое projectMode на $rootScope. Это обычная проблема, с которой сталкиваются люди в Угловом.

Области применения Угловые прототипы. Если свойство не найдено в текущей области, то оно ищет свойство с тем же именем в родительском объекте и так далее, пока оно не достигнет $rootScope. Итак, когда ваш просмотр инициализируется, может показаться, что projectMode - это то, что вы его инициализировали, на $rootScope.

Однако, как только вы меняете значение projectMode, оно создает новое значение в области управления с именем projectMode, что не совпадает с $rootScope.projectMode. Таким образом, имеет смысл, что ваш $watch не запускается ... Значение $rootScope не изменяется, изменяется только значение области контроллера.

Если вы хотите исправить ошибку, просто измените projectMode на $root.projectMode всюду в вашем HTML-коде. ($root внутри HTML, как вы ссылаетесь $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); 
     }) 

    }]) 

Я также хотел бы предложить, используя паб суб шаблона углового и есть часы обслуживания для сообщений вы можете попробовать использовать $ rootScope . $ широковещательного и к вашим услугам $ rootScope. $, и затем изменить вам расположение

Answer 4

Уловка не будет работать для меня - я должен был применить 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 к контроллеру.