我想写一个带有孤立范围的指令，但也希望使该范围可用于父范围的控制器。我发现这个解决方案：
- <div ng-controller="Main">
- <popupbutton directive-scope="popup"></popupbutton>
- </div>
- app.directive('popupbutton',[function() {
- return {
- restrict: "E",scope: {
- directiveScope: "="
- },link: function(sc,el,attrs) {
- sc.directiveScope = sc;
- sc.testvalue = 'foo';
- }
- };
- }]);
- app.controller('Main',function($scope) {
- alert($scope.popup.testvalue); // Where did the property 'popup' come from?!?
- });
见Plunker。
我发现这有点丑，因为它涉及写一个属性在HTML和控制器的代码，你不能知道范围属性来自哪里。有没有更好的方法来做到这一点？
编辑：
为了保持正确的关注点分离，你不应该混合范围。更不用说，它将难以同步。总而言之：你的指令不应该知道任何关于父范围(或它的控制器)，并且你的控制器不应该知道任何关于指令的内部。它们是单独层中的独立组件。
在控制器和指令之间进行通信的正确方法是通过指令属性。在弹出窗口的情况下，例如，这可以通过一个简单的布尔值来完成。
控制器和指令：
- app.directive('popupbutton',[function() {
- return {
- restrict: "E",scope: { isOpen: "=" },template: '<a ng-click="isOpen = !isOpen">Toggle</a><div>Open? {{isOpen}}'
- };
- }]);
- app.controller('MainCtrl',function($scope) {
- $scope.isOpen = false;
- });
和标记：
- <popupbutton is-open="isOpen"></popupbutton>
这种方法不需要逻辑，开箱即用，并保持关注的清晰分离。这里是一个更新的plunker：http://plnkr.co/edit/otIaGCLmiNdGcYEgi60f?p=preview
