我想写一个带有孤立范围的指令,但也希望使该范围可用于父范围的控制器。我发现这个解决方案:
<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