Değer, diğer denetleyiciden servise güncellenmiyor

Question

Her görünüm için menü ve denetleyici için bir denetleyicim var. Başlamak istediğim, etkin menü öğesinin görsel olarak seçilebilmesi için active sınıfını menü öğesine eklemektir. Bu çalışmayı elde etmek için mevcut menü öğesini (sayı) saklamak için bir servis yarattım. İşte benim görüşüm. Eğer yerel $scope değişkene hizmetinden değişkeni bağlayan görebileceğiniz gibi

body 
    div.menu(ng-controller="menuCtrl") 
     ul 
      li(ng-class="{selected: menuItem===0}") 
       a(href='#/') 
        i.material-icons.medium visibility 

      li(ng-class="{selected: menuItem===1}") 
       a(href='#/posts') 
        i.material-icons.medium library_books 

      li(ng-class="{selected: menuItem===2}") 
       a(href='#/categories') 
        i.material-icons.medium loyalty 
     span test {{menuItem}} // test menuItem variable 


    div.row-fluid 
     ng-view 

İşte menuCtrl kontrolör

app.controller('menuCtrl', ['$scope', '$http', 'global', '$interval', function($scope, $http, GLOBAL, $interval) { 
    $scope.menuItem = GLOBAL.menuItem; 
}]) 

bu.

app.controller('postsCtrl', ['$scope', '$http', 'global', '$location', function($scope, $http, GLOBAL, $location) { 
    // ... 
    GLOBAL.menuItem = 1; 
    // ... 
}]) 

diğer tüm görünüm denetleyicileri için aynı, yani:

Ve burada böyle hizmet en menuItem için assing belirli bir değere bir satır ekleyin her görünümü kumandam Sonra hizmet

app.factory('global', function($http) { 
    return { 
     menuItem: 0, 
    } 
}) 

var Bu menuItem 2,3,4, vs ..

Sorun şu ki, menuItem değişkeni değiştiyse bile Birkaç menü öğesinde yalamak, menü altındaki değer (test yorumunu koydum) hala 0'dır ve sonuç olarak sadece ilk menü öğesi active sınıfına sahiptir.

Neden?

Answer 1

Bu tür şeyleri yönetmek için directives denetleyicisini kullanmıyor olmalısınız.

Burada "seçili" yönergesi, herhangi bir denetleyici olmaksızın devlet hizmetinize bağlanmanın hayatı kolaylaştırdığı bir fiddle'dur. direktifi üzerine

<ul> 
    <li is-selected="1">Menu 1</li> 
    <li is-selected="2">Menu 2</li> 
    <li is-selected="3">Menu 3</li> 
    <li is-selected="4">Menu 4</li> 
    </ul> 

biz sadece seçili durumunu yansıtacak, aynı zamanda bir tıklama olay işleyicisi bir $ saatini kullanıp enjekte ederek seçilen öğeye değişiklikleri yönetmek değil:

myApp.directive('isSelected', ['myService', function(myService) { 
    return { 
    scope: {}, 
    link: function(scope, el, attrs) { 
     var id = parseInt(attrs.isSelected, 10),   
     unwatch = scope.$watch(
     function() { 
      return myService.menu.selected; 
     }, 
     function(val) {  
      if (val == id) 
      el.addClass("menuItemSelected") 
      else 
      el.removeClass("menuItemSelected") 
     }), 
     dst = scope.$on("$destroy", function() {  
     angular.element(el).off("click"); 
     unwatch(); 
     dst();   
     }); 
     angular.element(el).on("click",function() { 
     scope.$apply(function() {myService.menu.selected = id;});  
     }); 
    } 
    } 
}]);