如何使 html 节点对 Angular 控制器可见

Question

我们的 Angular Web 应用有多个面板。每个面板都有由标题文本和关闭按钮和内容组成的标题，如下图所示。

实现它的代码大致如下结构：

<aside class="right-panel" ng-controller="panelsController">
<header>
    <button type="button"><i class="close"></i></button>
    <h2>{{currentPanelCaption}}</h2>
</header>
<div class="scrollable-y">
    <div ng-show="panels.panelA" ng-controller="ctrlA">
        <panel-a-directive></panel-a-directive>
    </div>
    <div ng-show="panels.panelB" ng-controller="ctrlB">
        <panel-b-directive></panel-b-directive>
    </div>
    <div ng-show="panels.panelC" ng-controller="ctrlC">
        <panel-c-directive></panel-c-directive>
    </div>
    <div ng-show="panels.panelD">
        <div ng-include src="'Partials/some_simple.html'"></div>
    </div>
</div>
</aside>

但是现在有些面板需要在页眉中注入一些额外的自定义控件。例如，这个新按钮应该只对面板 C 可见。

问题是如何使标题可扩展？是否有一种正确的方法可以将一段 html 嵌入到标题中并使其可用于特定的控制器，例如控制器 C。我不想将 Some Button 的处理程序放在 $rootScope 内。

Answer 1

您的担忧是有道理的。您要做的是定义应在何处/如何使用此新功能。这个“按钮”是否可以重复使用并插入多个地方？这将仅用于控制器 C 吗？

如果您希望在多个地方使用“按钮”，那么您可以将按钮的处理程序放在指令本身内部，然后注入它可能需要的任何依赖项。

angular.directive('yourDirective', ['requiredService', 'requiredFactory', 'requiredFilter', 
 function (requiredService, requiredFactory, requiredFilter) {
    return {
        //...
        link: function (scope, element, attrs, controller) {
             element.bind('click', function(){
             //your event handler
             }
        }
    }
}])

否则，只需将您的逻辑放在您可能想要处理逻辑的控制器中。您可以通过附加编辑指令的范围来将处理程序传递给它，然后在构造函数中处理它：

angular.directive('yourDirective', ['requiredService', 'requiredFactory', 'requiredFilter', 
 function (requiredService, requiredFactory, requiredFilter) {
    return {
        scope:{
          eventHandler:'&'
        },
        template: '.... ng-click="eventHandler()"....'
    }
}])

然后在你的 HTML 中做

<your-directive event-handler="eventHandler" />

在你的控制器中做

scope.eventHandler = function(){
 .... your stuff ....
}