第一种写法：
<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title></title> </head><body> <div ng-app="myApp"> <script type="text/ng-template" id="zippy.html"> <div> <h3 ng-click="toggleContent()">{{title}} </h3> <div ng-show="isContentVisiable" ng-transclude></div> </div> </script> <input type="text" ng-model="model.title" /> <br /> <input type="text" ng-model="model.content" /><zippy title="{{model.title}}"> the content is :{{model.content}} </zippy> </div> <script type="text/javascript" src="../js/angular.min.js"></script> <script type="text/javascript" src="../js/templateUrl.js"></script> </body></html>
第二种写法是把html放在单独的html文件里面：
<div> <h3 ng-click="toggleContent()">{{title}} </h3> <div ng-show="isContentVisiable" ng-transclude></div> </div>
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目录肯定在另外一个文件夹里，所以自己记得路径的问题
<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title></title> </head><body> <div ng-app="myApp"> <!--<script type="text/ng-template" id="zippy.html"> <div> <h3 ng-click="toggleContent()">{{title}}</h3> <div ng-show="isContentVisiable" ng-transclude></div> </div> </script> --> <input type="text" ng-model="model.title" /> <br /> <input type="text" ng-model="model.content" /><zippy title="{{model.title}}"> the content is :{{model.content}} </zippy> </div> <script type="text/javascript" src="../js/angular.min.js"></script> <script type="text/javascript" src="../js/templateUrl.js"></script> </body></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; }; } } })
html文件：
<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title></title> </head><body> <div ng-app="myApp"> <!--<script type="text/ng-template" id="zippy.html"> <div> <h3 ng-click="toggleContent()">{{title}}</h3> <div ng-show="isContentVisiable" ng-transclude></div> </div> </script> --> <input type="text" ng-model="model.title" /> <br /> <input type="text" ng-model="model.content" /><zippy title="{{model.title}}"> the content is :{{model.content}} </zippy> </div> <script type="text/javascript" src="../js/angular.min.js"></script> <script type="text/javascript" src="../js/templateUrl.js"></script> </body></html>
建议还是使用第二种方法
如果觉得《angularJS学习---自定义指令---templateUrl的几种写法》对你有帮助，请点赞、收藏，并留下你的观点哦！
