如何从angularjs中的模板HTML调用指令 [英] How to call directive from template html in angularjs
本文介绍了如何从angularjs中的模板HTML调用指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
HTML
<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模板文件中，我必须调用指令.我的指令名称是'help'.但是如果我添加调用该指令，它将无法正常工作. 如何在angularjs的html模板中调用指令?
In this html template file i have to call a directive.My directive name is 'help'.But if i add to call the directive it is not working. how to call a directive inside html template in angularjs?
推荐答案
我不确定我是否完全理解这个问题. 此处是jsfiddle，用于演示如何在ng-template中使用自定义指令.
I'm not sure i fully understand the question. here is a jsfiddle to demonstrate how to use custom directive inside 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>
这篇关于如何从angularjs中的模板HTML调用指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
