angularJS学习---自定义指令---templateUrl的几种写法-优快云博客

本文介绍AngularJS中三种不同的指令模板实现方式，包括直接在HTML中定义模板、将模板置于单独的HTML文件及通过运行块注册模板。每种方法都有详细的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种写法：

第二种写法是把html放在单独的html文件里面：

var app = angular.module('myApp', []);
//app.run(function($templateCache) {
// $templateCache.put("zippy.html", "<div><h3 ng-click="toggleContent()">{{title}}</h3><div ng-show="isContentVisiable" ng-transclude></div></div>")
//});
app.directive('zippy',function ($templateCache) {
//console.log($templateCache.get("zippy.html"));
return {
restrict:'E',
transclude:true,
scope:{
title:'@'
},
templateUrl:'../node/templateUrl-zippy.html',
//template: $templateCache.get("zippy.html");
link: function(scope) {
scope.isContentVisiable = false;
scope.toggleContent = function() {
scope.isContentVisiable = !scope.isContentVisiable;
};
}
}
})

不过这里因为js目录是当前的目录，你的html目录肯定在另外一个文件夹里，所以自己记得路径的问题

这样做就使得阅读代码变得更加的容易

第三种写法：把模板放在运行块里面

var app = angular.module('myApp', []);
app.run(function($templateCache) {
$templateCache.put("zippy.html", '<div><h3 ng-click="toggleContent()">{{title}}</h3><div ng-show="isContentVisiable" ng-transclude></div></div>')
});
app.directive('zippy',function (/*$templateCache*/) {
//console.log($templateCache.get("zippy.html"));
return {
restrict:'E',
transclude:true,
scope:{
title:'@'
},
templateUrl:'zippy.html',
//templateUrl:'../node/templateUrl-zippy.html',
//template: $templateCache.get("zippy.html");
link: function(scope) {
scope.isContentVisiable = false;
scope.toggleContent = function() {
scope.isContentVisiable = !scope.isContentVisiable;
};
}
}
})