如何从任何一个指令更改所有指令范围值？

Question

我有一个指令重复了n次。我在每个指令中都有点击事件操作。每当我点击点击功能时，它都会更改指令中定义的一些范围变量名称。但它不会改变所有其他指令？如何做到这一点？我有我的 plunker。example

html:

  <!doctype html>
<html ng-app="myApp" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
  this is 1st time: <div sampledirective></div>
  <br />
  this is 2nd time: <div sampledirective></div>
  <br />
  this is 3th time: <div sampledirective></div>
  <br />
  this is 4th time: <div sampledirective></div>
  <br />
  this is 5th time: <div sampledirective></div>
</body>
</html>

我认为 'sampledirective' 渲染了 5 次。

控制器：

  app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.bar ="original bar";
  $scope.term = "original term"
  $scope.temp={};
  $scope.callMethod = function (){
    $scope.term = "Changed term"
    $scope.bar = "Changed bar";
    $scope.temp.callMethod();
  }

});

我在控制器中创建了一个对象 'temp'。

指令：

app.directive('sampledirective', function($http) {
  return {
      restrict: 'A',
      scope:true,
       replace: true,
       link:function(s,e,a){
         s.directive_scope="original directive_scope value";
         s.temp.callMethod = function(){

            s.directive_scope="Changed directive_scope value";
         }

       },
       template: '<div ><a ng-click="callMethod()">click_here</a> <span> <b>{{bar}}</b></span>   <span> <b>{{term}}</b></span>  <span> <b>{{directive_scope}}</b></span></div>'
  }

});

在我的指令模板中，我有 'temp.callMethod()'，它更改了范围变量值 'directive_scope= Changed directive_scope value'。但它没有反映在其他指令中。如何实现？

Answer 1

问题

仔细看看你的指令定义，注意你把 scope:true 放在那里。

它的作用是告诉 Angular 为指令的这个特定实例创建一个新的隔离范围，从父指令继承它。

所以你被 5 个指令实例困住了，它们都有自己的范围，当你在其中一个中分配 directive_scope 时，它绝不会反映在其他实例中。您可以阅读有关指令及其范围的更多信息 here

解决方案 1

您应该在父作用域中定义属性，然后使用双向绑定将其传递给指令

控制器定义

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.directiveScope = null;
    $scope.temp = {};
    $scope.callMethod = function () {
        $scope.term = "Changed term"
        $scope.bar = "Changed bar";
        $scope.temp.callMethod();
    };
}]);

指令定义

app.directive('sampleDirective', function () {
    return {
        ...
        scope: {
            temp: '=',
            callMethod: '&',
            directiveScope: '=' 
        },
        ...
    };
});

HTML

<div sample-directive temp="temp" call-method="callMethod()" directive-scope="directiveScope"></div>

注意每个指令实例都会将它自己的 temp.callMethod 函数写入父作用域的 temp 属性。

解决方案 2

您应该定义一个服务来存储共享值并将其注入控制器和指令

服务定义

app.factory('sharedData', function () {
    return {
        directiveScope: null
    };
});

控制器定义

app.controller('MainCtrl', ['$scope', 'sharedData', function ($scope, sharedData) {
    ...
    $scope.callMethod = function () {
        $scope.term = "Changed term"
        $scope.bar = "Changed bar";
        sharedData.directiveScope = "Changed directive_scope value";
    }
}]);

指令定义

app.directive('sampleDirective', ['sharedData', function (sharedData) {
    return {
        scope: {
            callMethod: '='
        },
        link: function ($scope, $element) {
            $scope.sharedData = sharedData;
        },
        template: '<div><a ng-click="callMethod()">click_here</a> <span> <b>{{bar}}</b></span>   <span> <b>{{term}}</b></span>  <span> <b>{{sharedData.directiveScope}}</b></span></div>'
    };
}]);

注意我将模板中的输出更改为 {{sharedData.directiveScope}}

如何从任何一个指令更改所有指令范围值？

How to change all directive scope value from any one of directive?

angularjs

angularjs-scope

angular-directive

问题

解决方案 1

解决方案 2