AngularJS：Access指令与父控制器的隔离范围

一尘不染

AngularJS：Access指令与父控制器的隔离范围

angularjs

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

<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?!?
});

参见柱塞。

我觉得这有点丑陋，因为它涉及用HTML编写属性，而在控制器的代码中，您无法确定范围属性的来源。有一个更好的方法吗？

编辑：

此外，似乎在运行控制器“ Main”时$ scope.popup甚至不可用。指令的链接功能尚未执行？

阅读 169

2020-07-04

共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>

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

2020-07-04