使用角度

Question

我有两个模块包含在指令中，称为＆＃39; bci-directive＆＃39;和＆＃39; bcd-directive＆＃39;我用来显示名为＆＃39; core＆＃39;的主模块内的数据。我试图让用户以两种不同的方式查看这两个模块，一个可以同时查看这两个模块，另一个可以看到每个模块用标签分隔 - 我遇到的问题是每个这些指令具有隔离范围，因此每对标记都会生成一个新视图，这会导致在用户进行编辑时更新两个子模块中的控制器变量的行为不正确。我想要的是能够为这些模块中的每个模块提供单个视图，这些模块可以在两个视图选项（tab / all）之间切换，同时保持相同的范围。

到目前为止，我已经尝试将这些观点从指令中转移到具有相同结果的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;
 }
})();

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

Answer 1

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

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

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

现在您的模板正在编译阶段之前确定，您无需手动编译它。