angularJs 前端的页面分解与组装

实现前端页面的复用

将分解的页面写成directive. 例如下面这个样子：

angular.module('pagecomponents', [], function($compileprovider){  

  $compileprovider.directive('commonheader', function($compile) {  

    return {  

      templateurl: 'templete/common/common_header.html',  

      replace: true,  

      transclude: false,  

      restrict: 'a',  

      scope: false  

    };  

  });  

  $compileprovider.directive('commonfooter', function($compile) {  

      templateurl: 'templete/common/common_footer.html',  

});  

 事实上，还可以更进一步，将templateurl写成可传入的参数。但是那样的话就跟下面这个方法差不多了。

使用ng-include非常简单。请注意src的参数是表达式，如果要传静态的字符串参数，请用引号将参数包裹起来。就像下面这个例子。

<!-- header -->  

<ng-include src="'common_header.html'"></ng-include>  

<div class="container">  

    <!-- angular ng-view -->  

    <div ng-view></div>  

    <!-- /angular ng-view -->  

</div>  

<!-- footer -->  

<ng-include src="'common_footer.html'"></ng-include>  

对ng-include稍作处理，可以实现更复杂的功能。例如下面这个动态加载表单页面的例子，就是通过变换ng-include的src参数实现的。src中的字符串会作为表达式处理（可以是$scope中的变量），所以直接写名字的话需要使用引号。

$compileprovider.directive("dynamicforminput", ['$http', '$templatecache',  

  function($http, $templatecache) {  

      restrict : 'e',  

      scope : {  

        model : '=',  

        section : '='  

      },  

      template : '<ng:include src="tpl"></ng:include>',  

      link : function(scope, ielement, iattrs) {  

        switch(scope.section.sectiontypeid) {  

          case 1:  

            $http.get('partials/survey/textinput.html', {  

              cache : $templatecache  

            });  

            scope.tpl = "partials/survey/textinput.html";  

            break;  

          case 2:  

            $http.get('partials/survey/selectoneoption.html', {  

            scope.tpl = "partials/survey/selectoneoption.html";  

          case 6:  

            if (scope.section.sectionid == 19) {  

              $http.get('partials/survey/addressselection.html', {  

                cache : $templatecache  

              });  

              scope.tpl = "partials/survey/addressselection.html";  

            }  

        }  

      }  

    }  

}]);  

假设在我们的 controller 中

$scope.myprimitive = 50;  

$scope.myobject    = {anumber: 11};  

每一个 ng-include 会生成一个子 scope，每个子scope 都继承父scope。

<script type="text/ng-template" id="/tpl1.html">  

  <input ng-model="myprimitive">  

  </script>  

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

<script type="text/ng-template" id="/tpl2.html">  

  <input ng-model="myobject.anumber">  

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

输入（比如”77″）到第一个 input 文本框，则子 scope 将获得一个新的 myprimitive 属性，覆盖掉父 scope 的同名属性。这可能和你预想的不一样。

输入（比如”99″）到第二个 input 文本框，并不会在子 scope 创建新的属性，因为 tpl2.html 将 model 绑定到了一个对象属性（an object property），原型继承在这时发挥了作用，ngmodel 寻找对象 myobject 并且在它的父 scope 中找到了。

如果我们不想把 model 从 number 基础类型改为对象，我们可以用 $parent 改写第一个模板：

<input ng-model="$parent.myprimitive">  

输入（比如”22″）到这个文本框也不会创建新属性了。model 被绑定到了父 scope 的属性上（因为 $parent 是子 scope 指向它的父 scope 的一个属性）。