ng-include指令

发布时间：2020-12-17 09:45:32 所属栏目：安全来源：网络整理

导读：一、AngularJS ng-include指令定义和用法 ng-include 指令用于包含外部的 HTML 文件。包含的内容将作为指定元素的子节点。 ng-include 属性的值可以是一个表达式，返回一个文件名。默认情况下，包含的文件需要包含在同一个域名下。语法 element ng-inclu

一、AngularJS ng-include指令

定义和用法

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

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

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

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

语法

 
   < 
   element 
   ng-include= 
   "filename" 
   onload= 
   "expression" 
   autoscroll= 
   "expression" 
   > 
   /element 
   > 
  

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

 
  < 
  ng-include 
  src= 
  "filename" 
  onload= 
  "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',function ($scope) {
    $scope.users = ['张三'];
});
app.controller('myCtrl',function ($scope) {
    $scope.tabClick = function (url) {
        $scope.tabUrl = url;
    }
});

ng-switch指令

ng-if指令

AngularJS动画（一）

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!