AngularJS基础 ng-include 指令示例讲解

AngularJS ng-include 指令

AngularJS 实例

包含 HTML 文件:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">

<div ng-include="'myFile.htm'"></div>

</body>
</html>

运行结果：

               myFile.htm 文件标题

这个文本来自被包含的文件 myFile.htm!

 定义和用法

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 可选，包含的部分是否在指定视图上可滚动。

以上就是对AngularJS ng-include指令的知识整理，后续继续补充。

赞 (0)

相关推荐

  • Angular.Js中ng-include指令的使用与实现

    Angular.Js中ng-include指令的使用与实现

    前言 大家如果想在angularjs动态加载一个内容,那我们就可以使用ng-include来实现.今天Insus.NET就在ASP.NET MVC环境中,举个例子来演示它的功能. 示例介绍 你可以在一个视图动态加载任一其它视图.如果你的动态内容有很多部件,你得需要在控制器创建相应的Action操作,如使用部分Partial view就不必创建相对应的Action.因此这是Insus.NET所喜欢的. 另外,我们还需要为ng-include的链接带些参数呢!!! 因此,参数,即是使用model来实

  • AngularJS基础 ng-include 指令简单示例

    AngularJS ng-include 指令 AngularJS 实例 包含 HTML 文件: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>

  • angularjs中使用ng-bind-html和ng-include的实例

    下面这个例子,往div标签内添加html内容: <!doctype html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>demo</title> <script type="text/javascript" src="lib/angularjs/angular.min.js"

  • Angular.js中ng-include用法及多标签页面的实现方式详解

    Angular.js中ng-include用法及多标签页面的实现方式详解

    前言 大家在平时的项目开发中,应该会经常遇到上图所示的需求,就是在一个页面中有多个标签,被选中的标签颜色会高亮显示,切换不同标签显示相应的不同内容.如果内容代码过多则写在同一个html文件就会显得特别乱,所以这里我们最好把页面代码分开单独管理,controller也可以分开来管理,这样就会显得清楚的多. 这里就要使用到Angularjs中个ng-include指令.下面来看看详细的介绍: 一.多标签的编写 首先需要了解需求: 1.同时只能选中一个标签 2.被选中的标签背景色以及自体颜色都将改变.

  • AngularJS基础 ng-include 指令示例讲解

    AngularJS ng-include 指令 AngularJS 实例 包含 HTML 文件: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>

  • AngularJS基础 ng-if 指令用法

    AngularJS ng-if 指令 AngularJS 实例 取消选中,并移除内容: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <b

  • Angularjs渲染的 using 指令的星级评分系统示例

    本文介绍Angularjs渲染的 using 指令的星级评分系统示例,分享给大家,具体如下: 我试图创建静态使用 angularjs/离子成效甚微的星级评分系统.但目前什么都不输出到屏幕上......我是我做错了吗? service.html <ion-list> <ion-item ng-repeat="business in businessList track by $index" class="item-icon-right"> &l

  • Laravel基础_关于view共享数据的示例讲解

    1.所有视图共享数据(share) 当所有视图都需要同一个数据时,使用视图工厂的share方法. 全局帮助函数view,如果传入参数,则返回Illuminate\View\View实例,不传入参数则返回Illuminate\View\Factory实例.所以我们可以通过在服务提供者(app\Providers\AppServiceProvider.php)的boot方法中使用如下方式实现视图间共享数据: /** * Bootstrap any application services. * *

  • AngularJS实现与后台服务器进行交互的示例讲解

    AngularJS作为一个非常实用的前端框架,我们知道在AngularJS中有自己的Model和Controler. angularJS中所有的请求都是通过js定义的Controler来完成的,也就是我们完全脱离了后台, 将整个应用程序的压力交给了客户端来完成.但是在实际开发的时候我们难免需要访问后台或者 与数据库进行交互,这个时候我们就需要一个类似于JQAJAX的方法来进行数据访问. 在angularJS中提供了一种与远程Http服务器交互的服务,$http $http是angularJS中的

  • AngularJS基础学习笔记之简单介绍

    AngularJS是一个JavaScript框架.它可以通过<script>标记被添加到HTML页面中. AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HTML元素中. AngularJS是一个JavaScript框架 AngularJS是一个JavaScript框架,它是由JavaScript语言编写的类库. AngularJS以JavaScript文件的形式进行发布,我们可以通过script标记将它添加到web页面中: 复制代码 代码如下: <scri

  • AngularJS基础教程之简单介绍

    AngularJS是一个JavaScript框架.它可以通过<script>标记被添加到HTML页面中. AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HTML元素中. AngularJS是一个JavaScript框架 AngularJS是一个JavaScript框架,它是由JavaScript语言编写的类库. AngularJS以JavaScript文件的形式进行发布,我们可以通过script标记将它添加到web页面中: <script src=&quo

  • AngularJs bootstrap详解及示例代码

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化. 二.Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化. <!doctype html> <html xmlns:ng=&qu

  • C语言编程C++动态内存分配示例讲解

    C语言编程C++动态内存分配示例讲解

    目录 动态内存管理 为什么存在动态内存分配 动态内存函数的介绍 malloc申请空间和free释放空间 有借有还 free释放内存 calloc申请内存 realloc调整动态内存的大小 realloc使用的注意事项 当然realloc也可以直接开辟空间 常见的动态内存错误 1.对NULL指针的解引用操作 2.对动态开辟空间的越界访问 3.对非动态开辟内存使用free释放 4.使用free释放一块动态内存开辟的一部分 5.对同一块动态内存多次释放 6.动态开辟内存忘记释放(内存泄漏) 几个面试题

  • 汇编基础程序编写教程示例

    汇编基础程序编写教程示例

    目录 源程序 1.1 构成 寄存器与段的关联假设 标号 定义一个段 程序结束标记 程序返回 程序运行 1.2 源程序中的"程序" 1.3 段结束.程序结束.程序返回 1.4 语法错误和逻辑错误 2 程序执行的过程 2.1 一个汇编语言程序从写出到最终执行的简要过程: 2.2 连接 2.3 可执行文件 2.4 程序执行过程的跟踪 总结 3 程序编写 3.1 两个基本的问题 3.2 数据在哪里 立即数(idata) 寄存器 段地址(SA)和偏移地址(EA) 3.3 指令处理的数据有多长 3

随机推荐