首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在角中重用部分

如何在角中重用部分
EN

Stack Overflow用户
提问于 2015-11-20 03:08:36
回答 3查看 202关注 0票数 1

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

我的表中的一行将类似于以下内容(但每个单元格中有更多信息):

\x{e76f}\x{e76f}名称/功能

我已经考虑过在不同的指令中使用ng-Include -模板,如下所示:

代码语言:javascript
运行
AI代码解释
复制
<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指令创建了一个新的作用域,我可以不使用它。做这件事最聪明和最DRYest的方法是什么?欢迎所有建议。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-01-13 02:15:41

我最终选择的解决方法是使用一个基本指令,其中包含一个标准模板和一个带有所有标准函数的控制器。

我将基指令配置为转换内容并将其附加到特定元素(可以包含专门信息的td )。

我创建了几个扩展指令,这些指令包含自己的专用模板,包括按钮、输入字段或仅包含文本。除了部分之外,扩展还(在大多数情况下)包含自己的控制器,这些控制器可以对基指令作用域(覆盖方法和更改变量)进行更改。

我决定在基指令链接中使用自定义transclude函数,而不是使用ng transclude指令。这使得指令能够真正地共享范围,而不仅仅是通过$scope.$parent进行引用(避免了一些麻烦)。

最后,我的指令看起来非常简单和枯燥,可以用一个简单的:

代码语言:javascript
运行
AI代码解释
复制
<tr my-base-directive><my-extension></my-extension></tr>

我的挫折缓解链接功能:

代码语言:javascript
运行
AI代码解释
复制
link: function(scope, el, attrs, ctrl, transcludeFn) {
    transcludeFn( scope, function( clone ) {
        el.find('.append').append( clone );
    });
}

如果有人觉得“正确的答案”被欺骗了,我的需求在开发过程中会有所增长(一如既往),并且在发布问题后变得更加清晰。

票数 0
EN

Stack Overflow用户

发布于 2015-11-20 05:31:49

html

代码语言:javascript
运行
AI代码解释
复制
<tr ng-repeat="info in ctrl.infocollection">
  <specialized-info info="info"></specialized-info>
</tr>

指令

代码语言:javascript
运行
AI代码解释
复制
(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
     }
})();

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

票数 1
EN

Stack Overflow用户

发布于 2015-11-20 05:39:04

我使用ngBindHTML$templateCache来实现这一点。

意见:

代码语言:javascript
运行
AI代码解释
复制
<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>

控制员:

代码语言:javascript
运行
AI代码解释
复制
...
$scope.nameTemplate = $sanitize($templateCache.get('name.html'));
...

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33825183

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档