angularJS学习之路(三十)---自定义指令---templateUrl
2015-11-25 09:39
579 查看
第一种写法:
第二种写法是把html放在单独的html文件里面:
不过这里因为js目录是当前的目录,你的html目录肯定在另外一个文件夹里,所以自己记得路径的问题
这样做就使得阅读代码变得更加的容易
第三种写法:把模板放在运行块里面
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>
第二种写法是把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 服务 广播
- angular源码分析:$compile服务——directive他妈
- Angular 学习笔记——ng-disable
- angular 杂类小结
- angular
- angularJS学习之路(二十九)---控制器的别名使用 和它的作用域的确定
- AngularJS表达式
- AngularJs $location 和 $window
- angularJS学习之路(二十八)---拦截服务
- angularJS学习之路(二十七)---创建服务的五大方法---value
- angularJS学习之路(二十六)---创建服务的五大方法---constant
- 推荐10个很棒的AngularJS学习指南
- AngularJS控制器controller如何通信?
- 推荐10个很棒的AngularJS学习指南
- 推荐10个很棒的AngularJS学习指南
- 在项目中使用AngularJS+UI-Grid
- angularJS学习之路(二十五)---创建服务的五大方法---provider
- 推荐10个很棒的AngularJS学习指南
- IONIC+ANGULARJS语言切换
- angularJS学习之路(二十四)---创建服务的五大方法---service