ng-include指令

一、AngularJS ng-include指令

定义和用法

ng-include 指令用于包含外部的 HTML 文件。

包含的内容将作为指定元素的子节点。

ng-include 属性的值可以是一个表达式，返回一个文件名。

默认情况下，包含的文件需要包含在同一个域名下。

---

语法

< element  ng-include= "filename"  οnlοad= "expression"  autoscroll= "expression"  > < /element >

ng-include 指令作为元素使用:

< ng-include  src= "filename"  οnlοad= "expression"  autoscroll= "expression"  > < /ng-include >

所有的 HTML 元素都支持该指令。

---

参数值

值	描述
filename	文件名，可以使用表达式来返回文件名。
onload	可选， 文件载入后执行的表达式。
autoscroll	可选，包含的部分是否在指定视图上可滚动。

二、实例1，指定外部html文件

结论特别说明：
1.ng-include,如果单纯指定地址，必须要加引号
2.ng-include,加载外部html，script标签中的内容不执行，不能加载，如果需要控制器处理需要在主页中注册
3.ng-include,加载外部html中含有style标签样式可以识别
4.ng-inclue,记载外部html中的link标签可以加载

html：

<div class="container" ng-app="myApp">
    <br />
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#"> 主页</a>
        </li>
        <li>
            <a href="#/about">关于</a>
        </li>
    </ul>
    <div class="tab-content">
        <!--<div class="tab-pane active" ng-include="'../template/head1.html'"></div>-->
        <div class="tab-pane active" ng-include="'../template/head2.html'"></div>
        <!--<div class="tab-pane active" ng-include="'animate1.html'"></div>-->
    </div>
</div>

js：

/*
* 特别说明：
* 1.ng-include,如果单纯指定地址，必须要加引号
* 2.ng-include,加载外部html，script标签中的内容不执行，不能加载，如果需要控制器处理需要在主页中注册
* 3.ng-include,加载外部html中含有style标签样式可以识别
* 4.ng-inclue,记载外部html中的link标签可以加载
*/
var app = angular.module('myApp', []);
app.controller('headCtrl', function ($scope) {
    $scope.users = ['张三'];
});

三、ng-include+ngAnimate动画实例1

html：

<div class="container" ng-app="myApp">
    <br />
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#home" data-toggle="tab"> 主页</a>
        </li>
        <li role="presentation">
            <a href="#about" data-toggle="tab">关于</a>
        </li>
    </ul>
    <div class="tab-content">
        <!--指定 bootstrap自带的 fade-->
        <!--<div id="home" class="tab-pane fade in active" ng-include="'../template/head1.html'"></div>
            <div id="about" class="tab-pane fade" ng-include="'../template/head2.html'"></div>-->
        <!--可以指定ngAnimate中的动画，如果预先指定in-clude地址仅在初次加载的时候有动画-->
        <div id="home" class="tab-pane slide-top active" ng-include="'../template/head1.html'"></div>
        <div id="about" class="tab-pane slide-top" ng-include="'../template/head2.html'"></div>
    </div>
</div>

js：

/*
* bootstrap中tab切换可以指定自带的fade
*/
var app = angular.module('myApp', ['ngAnimate']);
app.controller('headCtrl', function ($scope) {
    $scope.users = ['张三'];
});

四、ng-include+ngAnimate动画实例2

特别说明：
1.ng-include的外部html缓存加载，第一次从服务器加载，第二次从缓存加载
2.好像没有提供自定义控制缓存的接口

<div class="container" ng-app="myApp" ng-controller="myCtrl">
    <br />
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#home" data-toggle="tab" ng-click="tabClick('../template/head1.html')"> 主页</a>
        </li>
        <li role="presentation">
            <a href="#about" data-toggle="tab" ng-click="tabClick('../template/head2.html')">关于</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="home" class="tab-pane slide-top active" ng-include="tabUrl"></div>
    </div>
</div>

js：

/*
* 特别说明：
* 1.ng-include的外部html缓存加载，第一次从服务器加载，第二次从缓存加载
* 2.好像没有提供自定义控制缓存的接口
*/
var app = angular.module('myApp', ['ngAnimate']);
app.controller('headCtrl', function ($scope) {
    $scope.users = ['张三'];
});
app.controller('myCtrl', function ($scope) {
    $scope.tabClick = function (url) {
        $scope.tabUrl = url;
    }
});

更多：

ng-switch指令

ng-if指令

AngularJS动画（一）