使用templateUrl获取模板

有些时候，Directive中的模板template会变得很大，如果仍然放置在定义中，那么可能会造成阅读和修改不方便的情况。

针对这种情况，我们可以将template替换为templateUrl，通过引入外部文件的形式来调用布局。

例如：

  1. var App = angular.module("App", []);
  3. App.directive("formDirective", function () {
  4.     return {
  5.         restrict: "A",
  6.         scope: {
  7.         },
  8.         templateUrl:"part.html"
  9.     }
  10. });
  12. App.controller("FirstCtrl", function ($scope) {
  14. });
  1. <!DOCTYPE html>
  2. <html lang="zh" ng-app="App">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>{{"学习AngularJS 1.x"}}</title>
  6.     <link href="css/style.css" rel="stylesheet">
  7. </head>
  8. <body>
  10. <div ng-controller="FirstCtrl">
  11.     <div form-directive></div>
  12. </div>
  15. <script type="text/javascript" src="components/angular/angular.js"></script>
  16. <script type="text/javascript" src="js/app.js"></script>
  17. </body>
  18. </html>

同时，我们还要加入一个新的html文档。为了演示，我们将新建的文档放置在和index.html同一个目录，命名为part.html:

  1. <h1>part.html</h1>
  2. <p>这里是part.html中的内容</p>

运行效果：

图5-10 templateUrl的使用

ng-template

除了直接将HTML部件存储为独立的文件，我们也可以直接使用AngularJS提供的ng-template功能。这点在第四章中也有提到，这里是一个新的示例，帮助您对比物理文件和ng-template文件的优先级。

例如：

  1. <!DOCTYPE html>
  2. <html lang="zh" ng-app="App">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>{{"学习AngularJS 1.x"}}</title>
  6.     <link href="css/style.css" rel="stylesheet">
  7. </head>
  8. <body>
  10. <!-- 代码片段开始 -->
  11. <script type="text/ng-template" id="part.html">
  12.     <h1>通过ng-template封装的part.html</h1>
  13.     <p>这里是part.html中的内容</p>
  14. </script>
  15. <!-- 代码片段结束 -->
  17. <div ng-controller="FirstCtrl">
  18.     <div form-directive></div>
  19. </div>
  21. <script type="text/javascript" src="components/angular/angular.js"></script>
  22. <script type="text/javascript" src="js/app.js"></script>
  23. </body>
  24. </html>

这里，我们保留了上个例子中的所有文件（包括独立的part.html)，对JavaScript也未进行任何修改。

运行效果如下：

图5-11 templateUrl的使用

要使用这个功能，我们需要在<script>标签中，首先声明type="text/ng-template"，并给这段代码进行命名，示例代码中的id="part.html"即是这部分HTML代码片段的命名。使用时，直接使用part.html即可。

这样进行封装，与函数封装调用的概念类似。当默认HTML进行展示时，是不会显示这段代码的。而通过id调用后，又可以直接展示出来。

注意：通过示例我们可以看到，文档中的part.html的优先级高于独立的HTML文件。

使用函数获取templateUrl

templateUrl的特性与我们在第四章学习的ng-include类似，也支持通过函数来获取最终的url地址。例如：

  1. App.directive("formDirective", function () {
  2.     return {
  3.         restrict: "A",
  4.         scope: {},
  5.         templateUrl: function () {
  6.             return "part.html";
  7.         }
  8.     }
  9. });

运行效果与上面的图片一致，就不重复展示了。