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 的一個屬性）。