Переменные службы Angularjs не обновляются должным образом

Question

Я учусь угловато и пытаюсь понять, как работают службы и область действия. У меня есть следующий plnkr, который является меню off/on canvas (http://plnkr.co/edit/wP1Fu6vlJiopJi5AzkQt).

Я попытался разделить контроллеры. Я определяю логические переменные, называемые navLeft & navRight в сервисе call navState. Я использую левое и правое навигационные меню под одним ctrl под названием «navCtrl» и холст (содержимое &) под «canvasCtrl». Обе функции контроллеров принимают $ scope и navState в качестве входных данных.

Классы применяются на холсте и применяются navMenu на основе этих булевых выражений для имитации меню холста.

У меня 2 вопроса:

Вопрос 1: Когда левая кнопка переключения нажата, navLeft сделан верно. Это обновляет navLeft в canvasCtrl, но не navCtrl. Используя угловой способ, как я могу обновить состояния navCtrl, navLeft/navRight, когда он изменен в canvasCtrl?

Вопрос 2: При использовании угловых сервисов можно напрямую с контроллера обновлять служебные переменные (navState), которые затем передают новые состояния на оба контроллера с помощью службы (т.е. canvasCtrl, navCtrl) , Это угловой способ делать что-то?

Цените все комментарии, заблаговременно.

JS кода ниже:

var app = angular.module("plunker",[]); //include modules for animation, on/off navmenu 
app.controller('mainCtrl', function($scope){ 
    //Main Json Files/data to go here 
}); 

app.service('navState',function(){ 
    this.navLeft= false; //default navLeft menu off 
    this.navRight=false; //default navRight menu off 
}); 

app.controller('navCtrl',function($scope,navState){ 
    $scope.navLeft = navState.navLeft; 
    $scope.navRight = navState.navRight; 
}); 

app.controller('canvasCtrl', function($scope,navState){ 
    $scope.navLeft = navState.navLeft; 
    $scope.navRight = navState.navRight; 
    $scope.navClick=function(){ //changes class of canvas when navRight or navLeft value change 
    if ($scope.navLeft== true){ 
    $scope.navRight = false; 
    return ("canvas-off-left"); 
    } 
    else if ($scope.navRight== true){ 
    navState.navLeft = false; 
    return ("canvas-off-right"); 
    } 
    else{ 
    return("canvas-on"); //if both right and left menu false, use default canvas-on style ie width 100% 
    }  
}; 

}); 

Answer 1

Вы можете использовать SharedService подход.

Например, в вашем случае.

app.service('navState',function($rootScope){ 
     this.navLeft=false; //default navLeft menu off 
     this.navRight=false; //default navRight menu off 

     this.changeLeftValue = function(newValue){ 
     this.navLeft = newValue; 
     $rootScope.$broadcast("leftValueChanged"); 
     } 
     this.changeRightValue = function(newValue){ 
     this.navRight = newValue; 
     $rootScope.$broadcast("rightValueChanged"); 
     } 

     return this; 
    }); 

    app.controller('navCtrl',function($scope,navState){ 
     $scope.navLeft = navState.navLeft; 
     $scope.navRight = navState.navRight; 

     $scope.$on("rightValueChanged", function(){ 
     $scope.navRight = navState.navRight; 
     }); 
     $scope.$on("leftValueChanged", function(){ 
     $scope.navLeft = navState.navLeft; 
     }); 
    }); 

    app.controller('canvasCtrl', function($scope,navState){ 
     $scope.navLeft = navState.navLeft; 
     $scope.navRight = navState.navRight; 

     $scope.navClick=function(){ 
     var className = ""; 
     if ($scope.navLeft== true){ 
      $scope.navRight = false; 
      className = "canvas-off-left"; 
     } 
     else if ($scope.navRight== true){ 
      $scope.navLeft = false; 
      className = "canvas-off-right"; 
     } 
     else{ 
      className = "canvas-on"; 
     } 

     navState.changeRightValue($scope.navRight); 
     navState.changeLeftValue($scope.navLeft); 

     return className; 
    }; 
    }); 

В этом подходе вы вызываете служебную функцию (сеттер) в контроллере, где значение услуги было изменено. Эта служебная функция транслирует событие, и это событие будет прослушиваться с помощью необходимого контроллера.

Вы можете найти более подробную информацию о $broadcast и $onhere.

Я обновил ваш Plunker.

Надеюсь, это поможет.