前端菜鳥筆記angularjs的nginclude指令

前言

當我們在寫一個web應用的時候，很常見的情況就是一個頁面的部分內容會在另一個頁面用到，如果我們為這里相同的兩個頁面分別寫模板，雖然不是很麻煩，但是這樣重復造輪子的行為實在是不可取的，特殊場景除外。這個時候我們容易想到將之前的頁面復用，angularjs提供了ng-include指令來滿足這樣的場景。

原理

ng-include實際是通過一個新生成的子scope來繼承父controller中的scope，從而調用父controller中的元素。

在網上看了一個簡單的demo如下：

<div ng-controller="myController5 as Ctr5">
    <div ng-include src="'template1.html'"></div>
    <div ng-include src="'template2.html'"></div>
    </div>
    <script type="text/ng-template" id="/template1.html">
        <input ng-model="Ctr5.string" />
    </script>
    <script type="text/ng-template" id="/template2.html">
        <input ng-model="Ctr5.obj.num" />
    </script>

var myApp4 = angular.module('myApp4',[]);
myApp4.controller('myController5',function(){
    this.string="50";
    this.obj={num:11};
});

在打開這個html頁面的時候遇到一個小插曲，chrome瀏覽器會報錯，但是firefox就不會，看了錯誤信息(希望沒說錯)應該是chrome瀏覽器認為template1.html，template2.html和IncludeDemo.html是不同源的(javascript的同源策略)，它找不到對應的template，firefox不會報錯是因為firefox禁用掉了同源策略。這時如果非要用chrome也很簡單，在本地使用一個服務器來訪問IncludeDemo.html就可以了。比如node的http-server,python自帶了一個簡單服務器也可以解決這個問題。

在文件目錄下python -m SimpleHTTPServer然后訪問對應的html文件就可以了。

 

使用ng-transcode

ng-transcode可以達到同樣的效果，但是需要自己寫指令。

    <div ng-app="myApp5">
　　　　<pane></pane>
　　</div>

var myApp5 = angular.module('myApp5',[]);
myApp5.directive('pane',function(){
    return{
        restrict:"E",
        replace:true,
        templateUrl:'/template1.html'
    }
});

 

對於ngtranscode還不是很熟悉，里面的參數有什么作用還不是很清楚，今天先寫到這里，明天繼續更新。