angular学习笔记(三十)-指令(3)-templateUrl

这篇主要介绍指令中的templateUrl属性:

templateUrl属性值是一个url路径,路径指向一个html模板,html模板会填充(或替换)指令内容:

比如上一篇文章里的案例,我们把原来的template属性改用为templateUrl属性:

方法一:

html:

<!DOCTYPE html>
<html ng-app = 'dirAppModule'>
<head>
  <title>20.2 指令(templateUrl)</title>
  <meta charset="utf-8">
  <script src="angular.js"></script>
  <script src="script.js"></script>
  <style type="text/css">
    *{
      font-family:'MICROSOFT YAHEI';
      font-size:12px
    }
    h3 {
      color: #CB2027;
    }
  </style>
</head>
<body>
<div>
  <cd-hello></cd-hello>
  <div cd-hello></div>
  <div class="cd-hello"></div>
</div>
</body>
</html>

js:

var dirAppModule = angular.module('dirAppModule',[]);

dirAppModule.directive('cdHello',function(){
    return {
        restrict:'EAC',
        replace:true,
        templateUrl:'hello.html'
    }
});

hello.html:

<h3>hi,code_bunny</h3>

这样得到的结果和使用template:<h3>hi,code_bunny</h3>得到的结果是一致的.

*以这种方式使用templateUrl属性必须在环境中运行,本地文件是不行的.

 

方法二: 

上面这种方式加载模板,在模板文件比较大,加载需要一定时间的情况下,用户可能先看到标识符,等待模板加载完后才看到内容.如果要避免这种情况,可以使用以下方法:

html:

<!DOCTYPE html>
<html ng-app="dirAppModule">
<head>
  <title>20.3指令</title>
  <meta charset="utf-8">
  <script src="../angular.js"></script>
  <script type="text/ng-template" id="hello.html">
    <h3>hi,code_bunny</h3>
  </script>
  <script src="script.js"></script>
</head>
<body>
  <cd-hello></cd-hello>
  <div cd-hello></div>
  <div class="cd-hello"></div>
</body>
</html>

js:

/*20.3 指令 */
var dirAppModule = angular.module('dirAppModule',[]);
dirAppModule.directive('cdHello',function(){
    return {
        restrict:'EAC',
        templateUrl:'hello.html',
        replace:true
    }
});

直接在页面里添加一个script标签,script的type属性为:text/ng-template, script的id属性值自己定义,templateUrl的值就是这个script标签的id属性值,比如这个例子中的hello.html

注意这个script标签是不会发送http请求的. 

 

方法三:

html:

<!DOCTYPE html>
<html ng-app="dirAppModule">
<head>
  <title>20.4指令</title>
  <meta charset="utf-8">
  <script src="../angular.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <cd-hello></cd-hello>
  <div cd-hello></div>
  <div class="cd-hello"></div>
</body>
</html>

js:

/*20.4 指令 */
var appModule = angular.module('dirAppModule', []);
appModule.run(function($templateCache){
    $templateCache.put('hello.html','<h3>hi,code_bunny</h3>')
});
appModule.directive('cdHello',function(){
    return {
        restrict:'EAC',
        templateUrl:'hello.html',
        replace:true
    }
});

说明: 通过angular创建的模块,都有一个run方法,接受一个函数作为参数.该函数会被执行.

$templateCache是angular内置的一个服务,它的put方法用于存放模板.它接受两个参数,第一个参数为模板的名字,也就是templateUrl的值,这里就是hello.html,第二个参数就是html字符串,也就是模板的内容.

这种方法常用于模板内容是通过$http异步获取的.然后将模板放入$templateCache中以便后面使用.

 

完整代码:https://github.com/OOP-Code-Bunny/angular/tree/master/OREILLY/20.2%20%E6%8C%87%E4%BB%A4

            https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/20.3%20%E6%8C%87%E4%BB%A4.html

            https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/20.4%20%E6%8C%87%E4%BB%A4.html

　　　　 https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/script.js

posted @ 2014-09-02 17:04  诗&远方  阅读(15090)  评论(1)  编辑  收藏  举报