如何使Angular控制器可以看到html节点

Question

我们的角度网络应用程序有sevaral面板。每个面板都有标题文本和关闭按钮和内容组成的标题，如下图所示。

实现它的代码大致具有以下结构：

<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

您的疑虑是有效的。您要做的是定义应该使用此新功能的位置/方式。这是＆＃34;按钮＆＃34;是可以重复使用并插入多个地方？这是否仅用于控制器C？

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

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 ....
}