Question

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

例如：

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

左侧菜单模板
顶部菜单模板
正确的内容模板。

以上使用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与左侧菜单模板无关。

因此，单击链接意味着需要在ordercontroller中更改scope.data值。

Answer 1

不，那不行。

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

分享它们

这是一个工作代码段

    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>

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

1 个答案: