兩個指令之間的角度指令范圍共享

Question

我正在一個項目中，我有一個控制器和兩個指令，我需要共享它們之間的范圍，我在這里創建了plnkr。

代碼結構如下：

Main Controller

--Drawable Directive

----Draw-rectangle Directive

在Main ctrl ，在作用域上有一個對象rois ，它是Drawable和Draw-rectangle指令。 單擊drawable會更新到主控制器的作用域，但是當我單擊draw-rectangle指令時，它不會更新作用域。

我希望使用兩種方式的數據綁定來同步所有(3)范圍。

從概念上講似乎是正確的，但為什么它不更新Draw-rectangle Directive的范圍？

提前致謝！

Answer 1

您需要停止冒泡事件，因為單擊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 2

當您單擊“ 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> 

Answer 3

您正在對兩個指令使用隔離范圍。 孤立的作用域將創建一個子作用域。 因此，您不能從指令的鏈接功能中訪問“ rois”。 刪除隔離范圍后，請嘗試，

 scope: {
    rois: '='
 },