javascript - 根据属性中的数据更改指令模板

Question

我正在尝试访问一个属性 - 从 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来识别标签但似乎没有任何效果......有什么建议吗？提前致谢!

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

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