我工作的一个项目，我有一个控制器和两个指令，我需要共享它们之间的所有范围的共享，我已经创建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);
});
}
};
}
]);