如何重用angular中的局部

Question

我正在创建一个表，其中的每一行将由指令元素表示。 对于大多数行，可以使用相同的通用指令，但是有两行将具有非常专业的信息，迫使我创建特定的指令。

我表中的一行看起来像这样（但每个单元格都有更多信息）：
| 姓名| 能力 特殊信息/功能| 常规功能|

我考虑过在不同的指令模板中使用ng-Include，如下所示：

<tr><td ng-include="'name.html'"></td><td ng-include="'capablilites.html'"></td>
<td ng-include="'specialX.html'"></td><td ng-include="'general.html'"></td></tr>

但是ng-include指令创建了一个新的作用域，而我不能这样做。 最聪明，最干的方法是什么？ 欢迎所有建议。

Answer 1

HTML

<tr ng-repeat="info in ctrl.infocollection">
  <specialized-info info="info"></specialized-info>
</tr>

指示

(function() {
    'use strict';

    angular
        .module('myModule')
        .directive('specializedInfo', specializedInfo);

    function specializedInfo() {

        var directive = {
            restrict: 'E',
            templateUrl: '/app/views/templatename.html',
            scope: {
                info: '=' //use @ in one way
            },
            controller : infoCtrl,
            controllerAs: 'vm',
            bindToController: true     

        };
        return directive;
    }


    function infoCtrl() {
        var vm = this;
        vm.properties....

        //some logic for template
     }
})();

在指令控制器中，您可以根据传入的信息设置模板属性并进行适当绑定。

Answer 2

我使用ngBindHTML和$ templateCache来实现。

风景 ：

<tr><td ng-bind-html="nameTemplate"></td><td ng-bind-html="capabilitesTemplate"></td>
<td ng-bind-html="specialTemplate"></td><td ng-bind-html="generalTemplate"></td></tr>

控制器：

...
$scope.nameTemplate = $sanitize($templateCache.get('name.html'));
...

在将HTML绑定到视图之前，可能需要清理HTML，这就是我使用它的原因。

Answer 3

我最终选择解决此问题的方法是使用基本指令，该指令包含一个标准模板和一个具有所有标准功能的控制器。

我配置了基本指令以包含内容并将其附加在特殊元素（可能包含特殊信息的td）上。

我创建了两个扩展指令，其中包含带有按钮，输入字段或仅文本的专用模板。 除了局部函数外，扩展（在大多数情况下）还包含其自己的控制器，这些控制器可以对基本指令范围进行更改（覆盖方法和更改变量）。

我决定在base-directive链接中使用自定义的transclude函数，而不要使用ng-transclude指令。 这使指令实际上可以共享作用域，而不仅仅是通过$ scope。$ parent进行引用（使我有些头痛）。

最后，我的指令看起来非常简单和干燥，可以用简单的实例化：

<tr my-base-directive><my-extension></my-extension></tr>

我的无奈缓解链接功能：

link: function(scope, el, attrs, ctrl, transcludeFn) {
    transcludeFn( scope, function( clone ) {
        el.find('.append').append( clone );
    });
}

PS：如果有人对“正确答案”感到被骗，我的要求在开发过程中会有所增加（就像他们一贯一样），并且在发布问题后变得更加清晰。