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：

    

    

        

             主页
        
        

            关于
        
    
    

        
        

        
    

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：

    

    

        

             主页
        
        

            关于
        
    
    

        
        
        
        

        

    

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.好像没有提供自定义控制缓存的接口

    

    

        

             主页
        
        

            关于
        
    
    

        

    

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动画（一）