两个指令之间的角度指令范围共享

Question

我正在做一个项目，我有一个控制器和两个指令，我需要在它们之间共享范围，我创建了plnkr here.

代码结构如下：

Main Controller

--Drawable Directive

----Draw-rectangle Directive

在Main ctrl 中有一个对象rois 位于Drawable 和Draw-rectangle 指令的范围内。并且在点击drawable时它会更新到主控制器的范围但是当我点击draw-rectangle指令时它不会更新范围。

我希望使用双向数据绑定来同步所有(3) 范围。

它在概念上似乎是正确的，但为什么它不更新 Draw-rectangle 指令的范围？

提前致谢！

Answer 1

您正在为两个指令使用隔离范围。隔离范围将创建一个子范围。因此，您不能从指令的链接功能中访问“rois”。 删除隔离范围后尝试，

 scope: {
    rois: '='
 },

Answer 2

你需要停止冒泡事件，因为当 rect 指令被点击时，drawable 也会触发点击！使用 event.stopPropagation()

var app = angular.module('myApp');
app.directive('drawable', ['$document',
  function($document) {
    return {
      restrict: "EA",
      scope: {
        rois: '='
      },
      link: function(scope, element, attrs) {
        console.log(scope.rois);

        element.on('click', function(event) {
          event.stopPropagation();
          scope.rois = [{
            name: 'Stark',
            city: 'pune'
          }, {
            name: 'Inc',
            city: 'Mumbai'
          }];
          scope.$apply();

          console.log(scope.rois);
        });
      }
    };
  }
]);

app.directive('drawRectangle', ['$document',
  function($document) {
    return {
      restrict: "EA",
      scope: {
        rois: '='
      },
      link: function(scope, element, attrs) {
        element.on('click', function(event) {
          event.stopPropagation();
          scope.rois = [{
            name: 'Meuk',
            city: 'pune'
          }, {
            name: 'Tony',
            city: 'Mumbai'
          }];
          scope.$apply();
          console.log(scope.rois);
        });
      }
    };
  }
]);

Answer 3

当您点击“draw-rectangle”时，您也在点击“drawable”，因为“draw-rectangle”在“drawable”内。您必须使用 event.preventDefault() 停止从“draw-rectangle”到“drawable”的传播；如下：

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.rois = [{
    name: 'Jack',
    city: 'pune'
  }, {
    name: 'Tony',
    city: 'Mumbai'
  }];
  $scope.test = "Test";
});

app.directive('drawable', [
  function() {
    return {
      restrict: "EA",
      link: function(scope, element, attrs) {
        element.on('click', function(event) {
          event.preventDefault();
          scope.rois = [{
            name: 'Stark',
            city: 'pune'
          }, {
            name: 'Inc',
            city: 'Mumbai'
          }];
          scope.$apply();
          console.log(scope.rois);
        });
      }
    };
  }
]);

app.directive('drawRectangle', [
  function() {
    return {
      restrict: "EA",
      link: function(scope, element, attrs) {
        element.on('click', function(event) {
          event.stopPropagation(); // STOP PROPAGATION
          event.preventDefault();
          scope.rois = [{
            name: 'Meuk',
            city: 'pune'
          }, {
            name: 'Tony',
            city: 'Mumbai'
          }];
          scope.$apply();
          console.log(scope.rois);
        });
      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller='MainCtrl' style='width: 400px;height: 400px;border: 1px solid red;'>
  <div drawable rois="rois" style='width: 300px;height: 300px;border: 1px solid red;'>
    <div draw-rectangle rois="rois" style='width: 200px;height: 200px;border: 1px solid red;'>
      <button type="button" style='margin: 20px; border: 1px solid red;'>Click me!</button>
    </div>
  </div>
  <br>
  <br>{{rois | json}}
</div>