ng-include

ng-include可以作为标签或者属性来使用，作用是引入公用文件。

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

注意里面的单引号不要漏了。

 

第二种使用方法，使用参数作为引用。

$scope.header = '/test/header.html';

<div ng-include="header"></div>

和angualer其他地方的参数使用不同，此处不需要添加双大括号{{}}，直接使用就可以。

 

好了，下面是黑科技了。

以一个无限遍历目录树为例。

第一部分，页面内容部分

<div class="tree">
                <i class="glyphicon glyphicon-folder-close"></i>
                <a href="javascript:;" ng-right-click="editFolder($event, 0)">
                    <i></i>
                    <input type="hidden" value="0">
                    <span>{{sessionData.jobEnterprise.enterpriseName}}</span>
                </a>
                <!--<folder-tree current-folder="listData"></folder-tree>-->
                <ul>
                    <li ng-repeat="node in listData" ng-include="'query.html'">

                    </li>
                </ul>
            </div>
            <div class="right-content" ng-show="rightContent" ng-mouseleave="rightContent = false">
                <ul>
                    <li class="right-content-item" ng-click="rightAdd()">新建</li>
                    <li class="right-content-item" ng-click="rightUpdata()">重命名</li>
                    <li class="right-content-item" ng-click="rightDelete()">删除</li>
                </ul>
            </div>
            <div class="folder-text" ng-show="folderText"><input ng-model="folderValue" type="text"><button class="btn btnn-success" ng-click="rightAddOk()">确定</button><button class="btn btnn-info" ng-click="folderText = false"></button></div>
        </div>

第二部分，模板部分

<script type="text/ng-template" id="query.html">
    <a href="javascript:;" ng-right-click="editFolder($event, node)">
        <i></i>
        <input type="hidden" value="{{node.folderId}}">
        <span>{{node.folderName}}</span>
    </a>
    <ul>
        <li ng-repeat="node in node.childList" ng-include="'query.html'" ng-init="node = node.childList">

        </li>
    </ul>
</script>

此处当注意重点

 type="text/ng-template"

这是让ng-include优先选择本页模板的关键部分。

剩下的就是一些操作的修改了。