AngularJS:来自父控制器的Access指令的隔离范围

Question

我想编写一个带有隔离范围的指令,但也想让该范围可用于父范围的控制器.我找到了这个解决方案

<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中编写属性,而在控制器的代码中,你无法分辨范围属性的来源.有一个更好的方法吗？

编辑:

此外,当运行控制器'Main'时,似乎$ scope.popup甚至不可用.指令的链接功能还没有执行？

Answer 1

为了保持适当的关注点分离,不应混合使用范围.更不用说同步很难了.总结:你的指令不应该知道什么对父母范围(或其控制器)和你的控制器不应该知道任何有关指令的内部.它们是单独层中的独立组件.

在控制器和指令之间进行通信的正确方法是通过指令属性.例如,在弹出窗口的情况下,可以使用简单的布尔值来完成.

控制器和指令:

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