AngularJS：从父控制器访问指令的隔离范围

发布时间：2020-12-17 08:35:34 所属栏目：安全来源：网络整理

导读：我想写一个带有孤立范围的指令，但也希望使该范围可用于父范围的控制器。我发现这个解决方案： div ng-controller="Main" popupbutton directive-scope="popup"/popupbutton/divapp.directive('popupbutton',[function() { return { restrict: "E",scope: {

我想写一个带有孤立范围的指令，但也希望使该范围可用于父范围的控制器。我发现这个解决方案：

<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和控制器的代码，你不能知道范围属性来自哪里。有没有更好的方法来做到这一点？

编辑：

此外，看起来$ scope.popup甚至不可用，当控制器’Main’运行时。指令的链接函数还没有执行？

为了保持正确的关注点分离，你不应该混合范围。更不用说，它将难以同步。总而言之：你的指令不应该知道任何关于父范围(或它的控制器)，并且你的控制器不应该知道任何关于指令的内部。它们是单独层中的独立组件。

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

控制器和指令：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!