7.1. 定义模板内容


    定义模板的内容现在有三种方式:


    1. 在需要的地方直接写字符串

    2. 外部文件

    3. 使用 script 标签定义的“内部文件”


    第一种不需要多说。第二种和第三种都可以和 ng-include 一起工作,来引入一段模板。



    直接引入同域的外部文件作为模板的一部分:

    1. <div ng-include src="'tpl.html'">
      </div>

      <div ng-include="'tpl.html'">
      </div>


    注意, src 中的字符串会作为表达式处理(可以是 $scope 中的变量),所以,直接写名字的话需要使用引号。



    引入 script 定义的“内部文件”:

    1. <script type="text/ng-template" id="tpl">
      here, {{ 1 + 1 }}
      </script>

      <div ng-include src="'tpl'"></div>


    配合变量使用:

    1. <script type="text/ng-template" id="tpl">
      here, {{ 1 + 1 }}
      </script>

      <a ng-click="v='tpl'">Load</a>
      <div ng-include src="v"></div>