angularjs 指令 + 在许多控制器中应用范围值

Question

在 angularjs 中使用指令时如何将范围（隔离范围）值更新应用到多个控制器中。

例如：

我在视图页面中有很多模板：

1. 左侧菜单模板
2. 顶部菜单模板
3. 正确的内容模板。

上面的东西使用ui-router插件。 在这种情况下，正确的内容具有控制器名称是 ordersController.

左侧菜单模板：

<a ng-custom-click  data="data" href="#/order"> Orders </a> 

列表 ..等

app.controller('myapp', function($scope){

  $scope.data = {
            list : true,
            details : false,
            test : "rk controller"
        };
}

指令代码：

app.directive('ngCustomClick', function() {
    return {
        restrict : 'A',
        replace : false,
        controller : 'ordersController',
        scope : {
            data : '='
        },
        link : function(scope, el, attrs) {
            el.bind('click', function(e) {
                scope.data = {
                 list : false,
                 details : true,
                 test : "abcd directive"
              };
            });
        }
    };
});

这里的ordercontroller与左侧菜单模板没有关系。

所以当点击链接意味着scope.data值需要在ordercontroller中改变。

Answer 1

不，那行不通。

对于您使用的每个指令，将创建一个具有自己的 $scope 的新控制器。所以他们不共享数据。您需要使用服务共享它们

这是一个有效的 sn-p

    var app = angular.module("app",[]);
    app.service('myService', function(){
       this.data = {
                list : true,
                details : false,
                test : "rk controller"
            };
      return this;
    });
    app.controller('myapp2', function($scope, myService){

      $scope.dataOrders = myService.data;
      //optionnal if you want to save change from you order to the service
      $scope.$watch('dataOrders', function(newValue){
          myService.data = newValue;
      });
      // if service's data change resync it
      $scope.$watch(function(){return myService.data;}, function(newValue){
           $scope.dataOrders = newValue;
      });
    }
    );
    app.directive('ngCustomClick', function(myService) {
        return {
            restrict : 'A',
            replace : false,
            scope : {
               
            },
            link : function(scope, el, attrs) {
                el.bind('click', function(e) {
                    myService.data = {
                     list : false,
                     details : true,
                     test : "abcd directive"
                  };
                  scope.$apply();
                });
            }
        };
      });

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="app">
      <div>
          <a ng-custom-click href="#/order"> Orders </a> 
     </div>
     <div ng-controller="myapp2">
        Orders : {{dataOrders}} 
      </div>
   </div>