Angularjs 服务变量未正确更新

Question

我正在学习 angular 并试图了解服务和范围如何协同工作。我有以下 plnkr，它是一个 off/on canvas 菜单 (http://plnkr.co/edit/wP1Fu6vlJiopJi5AzkQt)。

我尝试拆分控制器。我在服务调用 navState 中定义了名为 navLeft 和 navRight 的布尔变量。我在名为 "navCtrl" 的一个 ctrl 下使用左右导航菜单，在 "canvasCtrl" 下使用 canvas(header&content)。两个控制器函数都将 $scope 和 navState 作为输入。

类应用于 canvas 和适用的 navMenu 基于这些布尔表达式来模拟 off/on canvas 菜单。

我有 2 个问题：

问题1：按下左切换按钮时，navLeft 变为真。这会更新 canvasCtrl 中的 navLeft，但不会更新 navCtrl。使用 angular 方式，我如何更新 navCtrl，navLeft/navRight 在 canvasCtrl 中更改时的状态？

问题 2：angular 使用服务时，是否可以直接从控制器内部更新服务变量（navState），然后使用服务（即 canvasCtrl、navCtrl）。这是angular做事的方式吗？？

感谢所有评论，提前致谢。

下面的 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;
     };
   });

在这种方法中，您在控制器中调用服务函数 (setter)，其中服务值已更改。此服务函数广播事件，此事件将从必要的控制器中侦听。

您可以找到有关 $broadcast 和 $on here.

的更多详细信息

我已经更新了你的Plunker。

希望对您有所帮助。

Angularjs 服务变量未正确更新

Angularjs service variables not updating properly

angularjs

angularjs-service

angularjs-scope