AngularJS:访问指令与父控制器的隔离范围 [英] AngularJS: Access directive's isolated scope from parent controller

问题描述

我想编写一个具有独立作用域的指令，但也想让该作用域可用于父作用域的控制器.我找到了这个解决方案:

<popupbutton directive-scope="popup"></popupbutton>
app.directive('popupbutton', [function() {返回 {限制:E"，范围:      {指令范围:="},链接:函数(sc，el，attrs){sc.directiveScope = sc;sc.testvalue = 'foo';}};}]);app.controller('Main', function($scope) {警报($scope.popup.testvalue)；//属性 'popup' 是从哪里来的?！?});

参见 Plunker.

我觉得这有点难看，因为它涉及在 HTML 中编写一个属性，而在控制器的代码中，您无法分辨 scope 属性的来源.有没有更好的方法来做到这一点?

此外，似乎 $scope.popup 在控制器 'Main' 运行时甚至不可用.指令的链接函数还没有执行?

解决方案

为了保持关注点的正确分离，您不应该混合作用域.更不用说很难同步了.总结一下:您的指令不应该任何关于父作用域(或其控制器)的信息，并且您的控制器不应该任何关于指令的内部结构.它们是不同层中的独立组件.

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

控制器和指令:

app.directive('popupbutton', [function() {返回 {限制:E"，范围:{ isOpen:="}，模板:'<a ng-click="isOpen = !isOpen">切换</a><div>打开?{{开了}}'};}]);app.controller('MainCtrl', function($scope) {$scope.isOpen = false;});

和标记:

</popupbutton>

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

I want to write a directive with isolated scope but also want to make that scope available for the parent scope's controller. I found this solution:

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

See Plunker.

I find this a bit ugly because it involves writing an attribute in HTML and in controller's code you can't tell where a scope property came from. Is there a better way to do this?

Edit:

Besides, it seems that $scope.popup isn't even available when controller 'Main' is run. The directive's linking function isn't executed yet?

解决方案

To maintain proper separation of concerns, you should not mix scopes. Not to mention that it will be hard to synchronize. To summarize: your directive should not know anything about the parent scope (or its controller) and your controller should not know anything about a directive's internals. They are separate components in separate layers.

The proper way to communicate between a controller and a directive is through directive attributes. In the case of a popup, say, this can be done with a simple boolean value.

The controller and directive:

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

And the markup:

<popupbutton is-open="isOpen"></popupbutton>

This method requires no logic, works out of the box, and maintains clean separation of concerns. Here's an updated plunker: http://plnkr.co/edit/otIaGCLmiNdGcYEgi60f?p=preview

这篇关于AngularJS:访问指令与父控制器的隔离范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！