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来实现这一目标。

观点：

META-INF\spring\batch\override\execution-context.xml

...
<bean id="jobService" class="com.foo.springbatch.MyPatchedSimpleJobServiceFactoryBean">
    <property name="jobRepository" ref="jobRepository" />
    <property name="jobLauncher" ref="jobLauncher" />
    <property name="jobLocator" ref="jobRegistry" />
    <property name="dataSource" ref="dataSource" />
</bean>
...

控制器：

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

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

Answer 3

我最终选择解决这个问题的方法是使用base-directive，其中包含一个标准模板和一个包含所有标准函数的控制器。

我配置了base-directive来转换内容并将其附加到一个特定元素（可能包含专门信息的td）。

我创建了一些扩展指令，它们包含自己的专用模板，包含按钮，输入字段或文本。除了partials之外，扩展（在大多数情况下）还包含自己的控制器，可以更改base-directive范围（覆盖方法和更改变量）。

我决定在base-directive链接中使用自定义transclude函数，而不是使用ng-transclude指令。这允许指令实际上共享范围，而不是仅通过$ scope。$ parent引用（让我有些头疼）。

最后，我的指令结果看起来非常简单和DRY，并且可以用简单的方式实现：

<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：如果有人对＃34;正确答案感到被骗，那么我的要求在开发期间会有所增长（一如既往），并在发布问题后变得更加清晰。

如何在角度中重复使用部分

3 个答案: