一、AngularJS 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： @H_301_152@/* * 特别说明： * 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',function ($scope) {
    $scope.users = ['张三'];
});
app.controller('myCtrl',function ($scope) {
    $scope.tabClick = function (url) {
        $scope.tabUrl = url;
    }
});

更多：

ng-switch指令

ng-if指令

AngularJS动画（一）

原文链接：https://www.f2er.com/angularjs/148445.html