Geek asks and answers

$ watches on root crops do not work, angular

I have a button that switches between admin and client mode. I laid it on the root crop so that I could access it everywhere.

I use angular-ui directiveto switch.

I set the watch on this model. But nothing happens. Any idea what could be wrong?

.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);
         })

    }])

Here is my view.

<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 is the angular -ui directive for switching.

I checked that is $rootScope.projectModechanging. Therefore, there $watchmust be something wrong with it.

+3
source share
4 answers

The real problem is what projectModeyour view does not match with projectModeon $rootScope. This is a common problem that people face in Angular.

Angular . , , $rootScope. , , , projectMode - , $rootScope.

, projectMode, projectMode, $rootScope.projectMode. , , $watch ... $rootScope , .

, projectMode $root.projectMode HTML. ($root HTML - , $rootScope.)

+8

$watch, , . true. ,

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

- 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);
      })

    }])

I would also suggest using the Angular pub pattern and have a service message viewer, you can try using $ rootScope. $ broadcast and in your service $ rootScope. $ on, and then change the location.

0
source

The trick will not work for me - I had to apply rootScope after changing the variable:

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

After that, I can do something similar in any controller that I want:

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

Remember to add $ rootScope to the controller.

0
source

More articles:


All Articles