AngularJS:访问指令的范围与父 Controller 隔离

Question

我想编写一个具有隔离作用域的指令，但也希望使该作用域可用于父作用域的 Controller 。我找到了这个解决方案:

<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 中编写属性，而在 Controller 的代码中，您无法分辨范围属性来自何处。有更好的方法吗？

编辑:

此外，当 Controller “Main”运行时，$scope.popup 似乎甚至不可用。该指令的链接函数尚未执行？

Answer 1

为了保持适当的关注点分离，您不应混合范围。更不用说同步会很困难。总结一下:您的指令不应该了解有关父作用域(或其 Controller )的任何信息，并且您的 Controller 也不应了解有关指令内部的任何信息。它们是不同层中的独立组件。

Controller 和指令之间通信的正确方法是通过指令属性。例如，在弹出窗口的情况下，这可以通过一个简单的 bool 值来完成。

Controller 和指令:

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>

此方法不需要任何逻辑，开箱即用，并保持关注点的清晰分离。这是一个更新的插件:http://plnkr.co/edit/otIaGCLmiNdGcYEgi60f?p=preview