以角度显示一个具有多个视图选项的指令答案

【问题标题】：Displaying one directive with multiple view options in angular以角度显示一个具有多个视图选项的指令
【发布时间】：2017-02-08 08:38:12
【问题描述】：

我有两个模块包含在名为“bci-directive”和“bcd-directive”的指令中，用于在名为“core”的主模块中显示数据。我试图为用户提供一种以两种不同方式查看这两个模块的方法，一种是他们可以同时查看两个模块，另一种是他们可以看到每个模块由选项卡分隔——我遇到的问题是每个这些指令中的一个具有隔离范围，因此每对标签都会生成一个新视图，这会导致在用户进行编辑时更新两个子模块中的控制器变量时出现错误行为。我想要的是能够为这些模块中的每一个提供一个视图，该视图可以在两个视图选项（选项卡/全部）之间切换，同时保持相同的范围。

到目前为止，我已尝试将这些视图从指令中移到 ng-includes 中，结果相同，但在研究时我无法找到更多建议。这是我目前拥有的前端：

<div ng-cloak="">
<md-toolbar class="md-primary">
    <div class="md-toolbar-tools">
        <!-- span tag to align buttons to right -->
        <span flex=""></span>
        <md-button ng-click="core.initiateSave()" class="md-raised">SAVE ALL</md-button>
        <md-checkbox ng-model="core.tabView" aria-label="tabViewSwitch" class="md-warn">
            Tab View
        </md-checkbox>
    </div>
</md-toolbar>
<div ng-show="core.tabView">
    <md-content>
        <md-tabs md-dynamic-height="" md-border-bottom="" class="md-primary md-hue-2">
            <md-tab label="Details">
                <bcd-directive></bcd-directive>
            </md-tab>
            <md-tab label="Items">
                <bci-directive></bci-directive>
            </md-tab>
        </md-tabs>
    </md-content>
</div>
<!-- View All: These are new views with new controllers that use same factory as above directives -->
<div ng-show="!core.tabView">
    <bcd-directive></bcd-directive>
    <bci-directive></bci-directive>
</div>
<div style="position:fixed;top:50%;left:50%">
    <md-progress-circular md-mode="indeterminate" class="md-warn loader" md-diameter="60" ng-hide="!loading" ng-disabled="!loading"></md-progress-circular>
</div>

还有指令：

(function(){
'use strict';
angular
.module('app.bci')
.directive('bciDirective', bciDirective);

/* @ngInject */
function bciDirective(){
    var directive = {
        templateUrl: '../app/sf/bci/templates/bci.html',
        controller: 'bciController',
        controllerAs: 'bci',
        scope: {},
        bindToController: true,
        restrict: 'E'
    };
    return directive;
 }
})();

是否可以在这些视图选项之间切换而不必实例化指令两次？

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

您可以将指令定义对象的template 属性设置为将返回动态模板的函数：

restrict: "E",
replace: true,
template: function(tElement, attributes) {
    return getTemplate(attributes.template);
}

然后根据您可以通过attributes 访问属性的条件从父级分配它。

现在你的模板在编译阶段之前就已经确定好了，你不需要手动编译了。

【讨论】：