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

我试图从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” 在连接功能，使用链接代码angularJS {{detailCtlr.getLocation（） }}代码does not work.If我直接返回在模板中的HTML代码的作品，但没有办法得到“tab.title”值...我尝试了一堆像改变范围，传递一个$索引确定选项卡，但似乎没有任何工作..任何建议？提前致谢！

来源

2015-12-13 San

这是一个典型的例子，你应该解释你想要达到的目标，而不是要求特定的解决方案。通常，当您尝试在指令中的不同模板之间切换时，您正在做错某些事情。一个指令应该有1个模板 - 而是根据逻辑包含子指令。 – Etse

我认为你对一个指令承担了很大的责任，如果你试图在多个指令中分割它，它会容易得多。一个容器指令 - 然后包含不同页面的子目录，使用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>

你会那么需要为每个页面独立的指令。

来源

2015-12-13 20:45:02 Etse

谢谢@Etse ..我试图做的是获取不同的HTML内容来显示取决于选项卡selected.ie取决于“tab.title”中的值..我试图获取此值作为指令中的属性然后相应地更改指令模板...我尝试了两件事 - – San

解决方案不是更改实际的模板 - 而是按照上面的示例进行操作。根据tab.title值的不同，在指令中包含不同的内容。（例如，如果'tab.title =='info'我会包含page-info指令） – Etse

1.使用模板 - 如果我直接在模板中直接返回HTML，它可以工作，但无法根据条件获取它“tab.title”..试过的模板函数，但不能使用attr.content ..//请参考上面的代码 2.使用链接 - 我能够在这种情况下得到tab.title ..但HTML返回到页面不会显示任何角色的东西在它的工作，即{{ctlr.option}} ..等.. – San

它不需要任何类型的解决方法，只需传递指令模板作为函数注入元素和属性，将任何需要的处理放入其中即可。

.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; 
});

来源

2017-01-06 07:18:02

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

回答

相关问题