如何调用模板从HTML指令在angularjs

的Html如何调用模板从HTML指令在angularjs

<script type="text/ng-template" id="ProfileTemplateHTML" > 
    <div class="container profilepopup-cont" align="center"> 
     <div class="row"> 
      <div class="col-sm-3 zero-margin-padding" align="center"> 
       <img id="DisplayImage" ng-src={{model.picLarge}} class="img-circle"> 
      </div> 
... 
</script>

在这个HTML模板文件我得叫directive.My指令的名称是“help'.But如果我添加调用指令是不工作。如何在angularjs的html模板中调用一个指令？

来源

2016-02-08 Ramya Selvaraj

如果我使用调用内部HTML指令其不工作 –

您的模板内模板指令编译后会奏效。你可以使用$ compile服务手动编译它 – murli2308

@ murli2308你能告诉我如何手动编译它吗？ –

-1

可以在这些方式

作为属性添加指令

<div help> 
 
... 
 
    
 
</div>

作为单独的标签

<page> 
 
    
 
    //your code 
 
    
 
</page>

来源

2016-02-08 07:39:35 kushalvm

您也可以通过课程''和评论''来完成。 – Christoph

她的问题不是关于如何在html中定义指令，她的问题是为什么它不在ng-template内工作。 –

我已经尝试保持它在div，页面，span.Its不工作！ –

我不知道我完全理解这个问题。 here是一个jsfiddle，演示如何在ng-template中使用自定义指令。

或尝试这个..

angular.module('demo', []) 
 
    .directive('help', function() { 
 
    return { 
 
     template: '<div>Help! {{info}}</div>', 
 
     scope: { 
 
     info: '@info' 
 
     } 
 
    }; 
 
    }) 
 
    .controller('MainCtrl', ['$log', 
 
    function($log) { 
 
     this.hello = 'This is MainCtrl'; 
 
     this.template = 'profile-template.html'; 
 

 
     //construct 
 
     $log.debug('DemoCtrl has been loaded'); 
 
    } 
 
    ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="demo"> 
 
    <script type="text/ng-template" id="profile-template.html"> 
 
    <div>this is profile-template.html</div> 
 
    <div help info="this is directive info."></div> 
 
    </script> 
 
    <div ng-controller="MainCtrl as main"> 
 
    <h2>just a demo</h2> 
 
    <div>{{main.hello}}, include template from {{main.template}}</div> 
 
    <hr> 
 
    <div ng-include src="main.template"></div> 
 
    </div> 
 

 
</body>

来源

2016-02-08 12:14:57 aifarfa

如何调用模板从HTML指令在angularjs

回答

相关问题