如何在angularjs中从模板html调用指令
Posted
技术标签:
【中文标题】如何在angularjs中从模板html调用指令【英文标题】：How to call directive from template html in angularjs 【发布时间】：2016-05-17 19:24:22 【问题描述】：<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 模板文件中，我必须调用一个指令。我的指令名称是“帮助”。但如果我添加调用该指令，它就不起作用。 如何在angularjs中调用html模板内的指令？
【问题讨论】：
如果我使用profilepopupCont（而不是 profilepopup-cont）。指令restrict 属性是什么？它应该包括“A”。
【参考方案1】：
您可以通过这些方式添加指令
-
作为属性
<div help>
...
</div>-
作为单独的标签
<page>
//your code
</page>【讨论】：
你也可以通过<span class="help"></span> 的课程和评论 <!-- help --> 来做到这一点。
她的问题不是关于如何在 html 中定义指令，她的问题是为什么它在 ng-template 中不起作用。
我已经尝试将它保存在 div,page,span 中。它不起作用！
指令也可以通过设置任意标签的类来应用。【参考方案2】：
我不确定我是否完全理解这个问题。 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>【讨论】：
以上是关于如何在angularjs中从模板html调用指令的主要内容，如果未能解决你的问题，请参考以下文章