AngularJs 的ng-include指令的使用
2024-09-30 15:59:38
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文件的引用都是在父级页面
最新文章
- 如何使用Linux命令行查看Linux服务器内存使用情况?
- quartz配置文件详解
- Leetcode 368. Largest Divisible Subset
- Action配置
- HDU2602 (0-1背包问题)
- java中Object转String
- Zookeeper的安装的配置
- file上传图片获取路径地址
- 关于构造函数和原型prototype对象的理解
- [学习笔记]15个QA让你快速入门51单片机开发
- Android EditText在ScrollView中被输入法遮挡
- Dubbo 分布式服务框架简介
- 基于python+appium+yaml安卓UI自动化测试分享
- Centos7下ELK+Redis日志分析平台的集群环境部署记录
- 启动weblogic报错:string value &#39;2.4&#39; is not a valid enumeration value for web-app-versionType in namespace http://java.sun.com/xml/ns/javaee
- Latex表格插入
- sql !=与null
- Python: C扩展初体验
- Java算法题:求素数
- HDU 5289 Assignment(二分+RMQ-ST)