• 使用templateUrl获取模板
    • ng-template
    • 使用函数获取templateUrl

    使用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. });

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