Wert wird nicht von anderen Controller über Service aktualisiert

Question

Ich habe einen Controller für Menü und Controller für jede Ansicht. Was ich erreichen möchte, ist die active Klasse zu dem Menüpunkt hinzufügen, so dass der aktive Menüpunkt visuell ausgewählt wird. Um dies zu erreichen, habe ich einen Servide erstellt, um den aktuellen Menüpunkt (Nummer) zu speichern. Hier ist meine Meinung.

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 

Hier menuCtrl Controller

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

Wie Sie mich aus dem Dienst zu lokalen $scope Variable binden Variable sehen können.

Und hier ist mein Service

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

Dann in jedem View-Controller-I menuItem wie diese eine Linie zu assing bestimmten Wert Dienstes hinzuzufügen:

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

Das gleiche gilt für alle anderen View-Controller, so dass menuItem ist 2,3,4, etc ..

Das Problem ist, dass selbst wenn es scheint, dass menuItem Variable geändert wird, wenn ich c lick auf mehrere Menüpunkte, der Wert unter Menü (wo ich test comment) ist immer noch 0 und im Ergebnis nur der erste Menüpunkt active Klasse.

Warum?

Answer 1

Sie sollten directives nicht Controller verwenden, um diese Art von Sache zu verwalten.

Hier ist ein fiddle, wo die "is-selected" -Richtlinie das Leben einfach macht, binden Sie in Ihren Staatsdienst ohne irgendeinen Controller in der Mitte.

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

Auf der Richtlinie beziehen wir nicht nur den ausgewählten Zustand, sondern auch Änderungen an den ausgewählten Eintrag verwalten einen Click-Ereignishandler ein $ Uhr durch die Verwendung und die Injektion:

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