根据属性中的数据更改指令模板答案

【问题标题】：Changing a directive template according to data in attribute根据属性中的数据更改指令模板
【发布时间】：2015-12-13 20:09:24
【问题描述】：

我正在尝试将属性 - 选项卡标题从 html 访问到我的指令中，并且根据该指令应该更改 html 模板。下面是代码 HTML

 .directive('contentItem', function($compile) {
   var locationTemplate = '<div class="container"><div class="row"><div class="col-md-6 form-horizontal" style="border:1px solid"><select id="location" ng-change="detailCtlr.getLocation()" class="form-control" ng-model="detailCtlr.locSelected"><option ng-repeat="option in detailCtlr.typeArr" value="{{option.typeId}}">{{option.type}}</option></select></div></div></div>';
   var peopleTemplate = '<div class="container">klfdjsfsjldjs</div>';

   var getTemplate = function(contentType) {


     switch (contentType) {
       case 'Locations':
         template = locationTemplate;
         break;
       case 'People':
         template = peopleTemplate;
         break;

     }

     return template;
   }

   var linker = function(scope, element, attrs) {
     console.dir(scope.content);

     element.html(getTemplate(scope.content)).show();

     $compile(element.contents())(scope);

   }

   return {
     //       template: function(tElement, tAttrs) {
     //           console.log("in template");
     //           console.log(tAttrs.content);
     //           console.dir(tAttrs.content);
     //            console.log("making templte");
     //     
     //         
     //            return getTemplate(tAttrs.content);
     //        },
     restrict: "E",
     replace: true,
     link: linker,
     scope: {
       content: '='
     }
   };
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<uib-tab ng-repeat="tab in tabs" select="Ctlr.getTabInfo(tab.title,$index)" active="" heading="{{tab.title}}">

  <content-item content="tab.title"></content-item>

</uib-tab>

我能够在链接器函数中访问内容“tab.title”但是，使用 {{detailCtlr.getLocation()}} 代码的 angularJS 链接代码不起作用。如果我直接在模板中返回 html，则代码有效但没有办法获得“tab.title”值......我尝试了很多事情，比如改变范围，传递一个 $index 来识别标签，但似乎没有任何工作......有什么建议吗？提前致谢！

【问题讨论】：

这是一个典型的例子，说明你应该解释你想要达到的目标，而不是要求一个具体的解决方案。通常，当您尝试在指令中的不同模板之间切换时，您做错了。指令应该有 1 个模板 - 并且根据逻辑包含子指令。

标签： javascript angularjs templates dynamic angularjs-directive

【解决方案1】：

我认为您对一个指令承担了很多责任，如果您尝试将其拆分为多个指令，那会容易得多。容器的一个指令 - 然后包含不同页面的子指令，使用 ng-if 选择要显示的指令。

你的指令模板可能是这样的：

<div>
    <page-info ng-if="content == 'info'"></page-info>
    <page-about ng-if="content == 'about'"></page-about>
    <page-login ng-ig="content == 'login'"></page-login>
</div>

然后您需要为每个页面创建一个单独的指令。

【讨论】：

谢谢@Etse ..我想做的是根据所选标签显示不同的HTML内容。即取决于“tab.title”中的值..我试图得到这个值作为指令中的属性，然后相应地更改指令模板...我尝试了两件事-
解决方案不是更改实际模板，而是按照我上面的说明进行操作。根据 tab.title 的值，在指令中包含不同的不同内容。（例如，如果 `tab.title == 'info' 我会包含 page-info 指令）
1.使用模板 - 如果我直接在模板中直接返回 HTML，它可以工作，但无法根据条件“tab.title”获取它..尝试模板函数但无法使用 attr.content 获取属性..//请参考上面的代码 2. 使用链接 - 在这种情况下，我可以获得 tab.title ..但是返回到页面的 HTML 没有显示任何有角度的东西在其中工作，即 {{ctlr.option}} ..etc。 .
目前我正在使用与您类似的解决方案，为每个选项卡制作不同的指令并且它可以工作..我只是想知道是否有办法通过一个指令使其工作..再次感谢！
有办法让它工作。您可以在指令的生命周期中连接到编译阶段并操作模板。但它被认为是不好的做法，你最终会得到难以推理的代码。我不会推荐它。

【解决方案2】：

它不需要任何解决方法，您可以简单地将指令模板作为函数注入元素和属性传递，在其中放置您需要的任何处理。

.directive('contentItem', function() {
   var directiveObj= {};

   directiveObj.template= function(element, attributes){

      if(attributes['contentType'] == 'Locations') 
          return locationTemplate;

      if(attributes['contentType'] == 'people') 
          return peopleTemplate;
   };

   //bla bla bla

   return directiveObject;
});

【讨论】：