Question

我正在学习角度，并试图了解服务和范围如何协同工作。我有以下plnkr，这是一个关/画布菜单（http://plnkr.co/edit/wP1Fu6vlJiopJi5AzkQt）。

我试图拆分控制器。我定义了名为navLeft＆amp;的boolean变量。 navRight在服务中调用navState。我在一个名为＆＃34; navCtrl＆＃34;的ctrl下使用左右导航菜单。和＃34; canvasCtrl＆＃34;下的画布（标题和内容）。两个控制器函数都将$ scope和navState作为输入。

这些类在画布上应用，并根据这些布尔表达式应用navMenu来模拟一个关/画布菜单。

我有两个问题：

问题1：按下左侧切换按钮后，navLeft变为true。这会更新canvasCtrl中的navLeft，但不会更新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;
     };
   });

在这种方法中，您可以在控制器中调用服务功能（setter），其中服务值已更改。此服务功能广播事件，此事件将从必要的控制器中进行监听。

您可以找到有关$broadcast和$on here 的详细信息。

我已更新 Plunker 。

希望它有所帮助。

Angularjs服务变量未正确更新

1 个答案: