Отображение одной директивы с несколькими параметрами просмотра в угловом

Question

У меня есть два модуля, завернутые внутри директив под названием «bci-directive» и «bcd-directive», которые я использую для отображения данных внутри первичного модуля, называемого «ядром». Я пытаюсь дать пользователям возможность просматривать эти два модуля двумя разными способами: один, где они могут просматривать оба одновременно, и один, где они могут видеть каждый, разделенный вкладками - проблема, с которой я сталкиваюсь, заключается в том, что каждый из этих директив имеет изолированный объем, поэтому каждая пара тегов генерирует новое представление, которое приводит к неправильному поведению при обновлении переменных контроллера в двух подмодулях, когда пользователи вносят изменения. Я бы хотел, чтобы иметь возможность одного представления для каждого из этих модулей, которые могут переключаться между двумя параметрами просмотра (вкладка/все), сохраняя при этом ту же область видимости.

До сих пор я старался переместить эти взгляды из директив и в ng-include с теми же результатами, я не смог найти гораздо больше предложений при исследовании. Вот то, что я в настоящее время на передний конец:

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

Теперь ваш шаблон определяется до этапа компиляции, и его не нужно вручную компилировать.