AngularJs 的ng-include指令的使用
AngularJs通过指令ng-include来将页面中共用的模块分离出来,这个功能和mvc里面的分部页的作用一样的。
先看文件的结构:
父页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.staticfile.org/angular.js/1.7.5/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="ParentCtr">
<div ng-include="'Childrens/Header.html'"></div>
<input type="text" ng-model="test" />
<p style="background-color:darkgoldenrod">这里演示在一个HTML页面中,通过引用子页面来完成整个页面功能</p> <div ng-include="'Childrens/Footer.html'"></div>
<script type="text/javascript">
var formapp = angular.module('myApp', []);
formapp.controller('ParentCtr', function ($scope) {
$scope.test = "hello";
$scope.$on('to-parent', function (d, data) {
$scope.$broadcast('to-child', data);
});
})
.controller("headerCtr", function ($scope) {
$scope.headerTitle = "头部";
$scope.btnheader = function () {
$scope.headerTitle = "点击了按钮";
}
$scope.btnheader1 = function () {
$scope.$emit('to-parent', $scope.headerTitle);
}
})
.controller("footerCtr", function ($scope) {
$scope.ft = "尾部";
$scope.list = ["abc", "efg", "xyz"];
$scope.$on('to-child', function (d, data) {
$scope.fromHeader= data;
});
});
</script>
</body> </html>
子页面Header.html:
<div ng-controller="headerCtr">
<h2>这是头部</h2>
<input ng-model="headerTitle" />
<input type="button" ng-click="btnheader()" value="点击我" />
<input type="button" ng-click="btnheader1()" value="点击我,将文本框的内容显示到尾部" />
</div>
子页面Footer.html:
<div ng-controller="footerCtr">
<h2>这是尾部</h2>
<p>{{ft}}</p>
<p>{{fromHeader}}</p>
<ul>
<li ng-repeat="t in list">{{t}}</li>
</ul>
</div>
运行效果:
在不同的控制器之间传值比较麻烦,同级的控制器之间不能相互传值,而是通过父级控制器来传值。具体步骤:
当点击头部的按钮的时候,通过 $scope.$emit('to-parent', $scope.headerTitle); 将要传递的数据传递到父级控制器,然后在父级控制器中,通过 $scope.$on('to-parent', function (d, data)来获取数据,然后在函数中调用 $scope.$broadcast('to-child', data);
将数据传递到子控制器,最后在子控制器中用$scope.$on('to-child', function (d, data) 来接收传来的数据。
如果想把js脚本单独放到js文件中,可以这样:但要注意的是,所有的js文件的引用都是在父级页面
AngularJs 的ng-include指令的使用的更多相关文章
- 浅谈JSP中include指令与include动作标识的区别
JSP中主要包含三大指令,分别是page,include,taglib.本篇主要提及include指令. include指令使用格式:<%@ include file="文件的绝对路径 ...
- AngularJS常用插件与指令收集
angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...
- JSP(include指令与<jsp:include>动作的区别)
<%@ page language= "java" contentType="text/html;charset=UTF-8" %><html ...
- jsp include指令
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...
- include指令和include标签的区别
区别 类别 语法 发生作用时间 包含的内容 转化成Servlet 编译时间 运行时间 include指令 <%@ include file="" %> 页面交换 实际内 ...
- 使用-MM生成include指令和依赖生成(make include directive and dependency generation with -MM)
I want a build rule to be triggered by an include directive if the target of the include is out of d ...
- include动作标记和include指令标记学习笔记
我的jsp学习参考书是耿祥义,张跃平编著的jsp大学使用教程这本书,我也向大家推荐这本书,我觉得这本书适合我的学习方式,知识的讲解透彻易懂. include指令标记 ...
- Java学习-035-JavaWeb_004 -- JSP include 指令
inclue 指令是将不同的文件插入到 JSP 网页中,这些文件可以是文本文件.HTML文件.JSP 文件,指令语法如下: <%@include file="相对路径"%&g ...
- 转: JSP中include指令和include动作的区别
include指令是编译阶段的指令,即include所包含的文件的内容是编译的时候插入到JSP文件中,JSP引擎在判断JSP页面未被修改,否则视为已被修改.由于被包含的文件是在编译时才插入的,因此如果 ...
- include指令和<jsp:include>标准动作
利用JSP的包含机制,可以有效的避免重复,把可重用的部分独立出去,使用include把它们包含到当前文件.JSP有两种包含机制:include指令和<jsp:include>标准动作. 1 ...
随机推荐
- POST & GET & Ajax 全解
GET&POST&Ajax 全解 一.POST和GET的差别 GET:GET方法提交数据不安全,数据置于请求行.客户段地址栏可见:GET方法提交的数据限制大小在255个字符之内.參数直 ...
- glTF格式初步了解
glTF格式初步了解 近期看到Qt 3D的进展.偶然了解到了一种新的格式:glTF格式.这样的格式据说比现有的3D格式更加符合OpenGL应用的须要.这引起了我的好奇.于是我在Qt 3D的外部链接中找 ...
- Qt 调用 Java 方法笔记
Qt 调用 Java 方法笔记 假设遇到相似的错误: error: undefined reference to '_jstring* QAndroidJniObject::callStaticMet ...
- C#使用SharpZipLib压缩解压文件
#region 加压解压方法 /// <summary> /// 功能:压缩文件(暂时只压缩文件夹下一级目录中的文件,文件夹及其子级被忽略) /// </summary> // ...
- HDU 5302(Connect the Graph- 构造)
Connect the Graph Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- hdu 2059 龟兔赛跑 (dp)
/* 把起点和终点比作加油站,那总共同拥有n+2个加油站了, 每次都求出从第0个到第j个加油站(j<i)分别在加满油的情况下到第i个加油站的最短时间dp[i], 终于的dp[n+1]就是最优解了 ...
- #include "*.c"文件的妙用
今天我在看代码的时候突然看到在一个.c文件里包括了#include "*.c"代码,这个让我非常诧异,然后google了一下.才发现是这么回事情.以下我写了一个測试代码.我相信你看 ...
- 关于wireshark
1 对https进行抓包,或者说抓包经过了ssl加密的包 只要有rsa private key就可以了. https://wiki.wireshark.org/SSL 2 对浏览器访问的https的网 ...
- XML简单介绍及举例
可扩展标记语言(eXtensibleMarkup Language,简称XML).是一种标记语言.标记指计算机所能理解的信息符号.通过此种标记,计算机之间能够处理包括各种信息的文章等. 怎样定义这些标 ...
- H264编码器性能測试
版本号:0.1.0-beta 作者:石硕 更新:2014-04-13 15:54:08 ======================================================== ...