我工作的一個項目，我有一個控制器和兩個指令，我需要共享它們之間的所有範圍的共享，我已經創建plnkr here.角指令範圍兩者之間的指令
的代碼結構如下：
Main Controller
--Drawable Directive
----Draw-rectangle Directive
在Main ctrl有一個對象rois的範圍，我對Drawable和Draw-rectangle指令。並在可繪製點擊它更新到主控制器的範圍，但是當我點擊繪製矩形指令它不更新範圍。
我希望所有的(3)作用域使用雙向數據綁定進行同步。
它似乎在概念上是正確的，但它爲什麼不從Draw-rectangle指令更新範圍？
在此先感謝！
當你點擊「繪製矩形」你也點擊「繪製」，因爲「繪製矩形」裏面「繪製」。您必須使用event.preventDefault（）;停止從「繪製矩形」到「可繪製」的傳播。爲便接踵而來：
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>您正在使用兩個指令的隔離範圍。隔離範圍將創建一個子範圍。所以，你不能從指令的鏈接函數中訪問「rois」。 嘗試刪除隔離的範圍後，
scope: {
rois: '='
},
u需要停止冒泡的事件，因爲當RECT指令點擊，繪製也觸發點擊！使用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);
});
}
};
}
]);