angularJS学习之路（三十）---自定义指令---templateUrl

来源：互联网发布：阿里大数据面试题编辑：程序博客网时间：2024/04/30 05:25

第一种写法：

<!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>

建议还是使用第二种方法

0 0