- 浏览: 157223 次
- 性别:
- 来自: 重庆
博客专栏
-
Angularjs实战
浏览量:18310
文章分类
- 全部博客 (98)
- 工具 (2)
- 字符编码问题 (1)
- 微信开发调试工具 (2)
- java (10)
- spring (2)
- mybatis (2)
- spring boot (2)
- 其他 (1)
- spring ajax (1)
- jquery (4)
- 中间件 (3)
- oracle数据库 (2)
- oracle (1)
- 文件上传 (1)
- AngularJS (23)
- css (4)
- js (9)
- Iconfont (1)
- 个人 (1)
- WebLogic (4)
- maven (2)
- 转载 (1)
- File (2)
- webupload (4)
- tomcat (2)
- linux (2)
- Jersey (11)
- 脚本 (1)
- ftp (1)
- xdata (1)
- 钉钉 (1)
- 文档转换 (3)
- ionic (1)
- vue (2)
最新评论
-
masuweng:
java批量将多文件打包成zip格式 -
柳絮飞祭奠:
// 读取错误执行的返回流 是这个 B ...
java调用执行cmd指令启动weblogic -
109:
您好,我想知道在startServer怎么判断它是错误执行的流 ...
java调用执行cmd指令启动weblogic -
williamfan:
dataSourceConfig.getUrl()这个可以直接 ...
spring boot和mybatis入门
我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式
一、使用$on、$emit和$broadcast进行controller通信
虽然AngularJS是不推荐使用嵌套controller的使用,但是会有场景使用到父子controller传值的情况
$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。
$emit:子传父 传递event与data
$broadcast:父传子 child controller传递event与data
$on:监听或接收数据。。用于接收event与data
例子:
你会发现点击父级的div会使用$scope.$broadcast传递'sendChild'到子集,子集也会使用$on来监听父级传递的值。熟悉一下即可使用这种传值方式。
二、使用SERVICES(服务)来实现值的传递
接下来创建一个新的服务,服务里面定义一个鱼的数组,然后在使用addFish 方法添加鱼
接下来是controller和html的创建
展示点击父级的div调用父作用域的方法添加鱼,点击子集调用子集作用域的方法获得鱼
三、使用作用域进行controller的通信
div:
controller:
效果
这里我们会看到在父级定义的name在子集里面也可以获取到,这是AngularJS作用域机制,当我们调用子集的方法打印$scope.name,这时候会一直往父级向上的作用域中到$rootScope找name,所以这时候会打印出name。
最后就是可以使用根作用域$rootScope来获取不同controller的值。
AngularJS监听数组变化
AngularJS的$location基本用法和注意事项
AngularJS 无限滚动加载数据控件 ngInfiniteScroll
AngularJS实战之ng-repeat的详细用法
ng-show和ng-if的区别和使用场景
AngularJS实战之路由ui-view传参
AngularJS实战之filter的使用二
AngularJS实战之filter的使用一
AngularJS实战之路由ui-view
一、使用$on、$emit和$broadcast进行controller通信
虽然AngularJS是不推荐使用嵌套controller的使用,但是会有场景使用到父子controller传值的情况
$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。
$emit:子传父 传递event与data
$broadcast:父传子 child controller传递event与data
$on:监听或接收数据。。用于接收event与data
例子:
<body> <div ng-controller="parentController"> <div ng-click="parent_onclick()" style="background-color: green;">我是父亲{{parent}}</div> <div ng-controller="childController"> <div ng-click="child_onclick()" style="background-color: red;">我是子集{{child}}</div> </div> </div> </body> <script type="text/javascript" src="../plugins/angular/angular.js"></script> <script type="text/javascript"> var lxApp = angular.module("lxApp", []); lxApp.controller("parentController", function($scope) { $scope.$on("sendParent", function(event, data) { $scope.parent = data; }); $scope.parent_onclick = function() { $scope.$broadcast('sendChild', '我给子控制器传递数据'); }; }).controller("childController", function($scope) { $scope.$on("sendChild", function(event, data) { $scope.child = data; }); $scope.child_onclick = function() { $scope.$emit('sendParent', '我给父级传递数据'); }; }); </script>
你会发现点击父级的div会使用$scope.$broadcast传递'sendChild'到子集,子集也会使用$on来监听父级传递的值。熟悉一下即可使用这种传值方式。
二、使用SERVICES(服务)来实现值的传递
我们首先来创建一个module(模块)
var lxApp = angular.module("lxApp", []);
var lxApp = angular.module("lxApp", []);
接下来创建一个新的服务,服务里面定义一个鱼的数组,然后在使用addFish 方法添加鱼
lxApp.service('lxAppService', function($rootScope) { var service = { fishs : [ { title : "鲨鱼", area : "sea" }, { title : "鲸鱼", area : "sea" } ], addFish : function(fish) { service.fishs .push(fish); } }; return service; });
接下来是controller和html的创建
<div ng-controller="parentController"> <div ng-click="parent_onclick()" style="background-color: green;">我要向大海添加鱼</div> <div ng-controller="childController"> <div ng-click="child_onclick()" style="background-color: red;">我要获得鱼</div> </div> </div>
lxApp.controller("parentController", function($scope,lxAppService) { $scope.parent_onclick = function() { lxAppService.addFish({ title : "海豚", area : "sea" } ); alert(lxAppService.fishs); }; }).controller("childController", function($scope,lxAppService) { $scope.child_onclick = function() { alert(angular.toJson(lxAppService.fishs)); }; });
展示点击父级的div调用父作用域的方法添加鱼,点击子集调用子集作用域的方法获得鱼
三、使用作用域进行controller的通信
div:
<div ng-controller="parentController"> <div style="background-color: green;">我是父级</div> <div ng-controller="childController"> <div ng-click="child_onclick()" style="background-color: red;">我是获得父级的名字</div> </div> </div>
controller:
lxApp.controller("parentController", function($scope) { $scope.name="1212"; }).controller("childController", function($scope,$rootScope) { $scope.child_onclick = function() { alert($scope.name); }; });
效果
这里我们会看到在父级定义的name在子集里面也可以获取到,这是AngularJS作用域机制,当我们调用子集的方法打印$scope.name,这时候会一直往父级向上的作用域中到$rootScope找name,所以这时候会打印出name。
最后就是可以使用根作用域$rootScope来获取不同controller的值。
AngularJS监听数组变化
AngularJS的$location基本用法和注意事项
AngularJS 无限滚动加载数据控件 ngInfiniteScroll
AngularJS实战之ng-repeat的详细用法
ng-show和ng-if的区别和使用场景
AngularJS实战之路由ui-view传参
AngularJS实战之filter的使用二
AngularJS实战之filter的使用一
AngularJS实战之路由ui-view
发表评论
-
Angularjs自定义指令计算浏览器高度
2018-03-27 21:51 822<!DOCTYPE html> <html ... -
AngularJS封装webupload实现文件夹上传
2018-03-14 00:11 1723百度的webupload没有开放a ... -
巧用 Jersey RESTful WebService框架解决文件上传乱码
2018-01-28 13:50 2709一、当我们使用jersey框架封装的restful进行文件上传 ... -
AngularJS封装UEditor
2018-01-09 18:35 863<!DOCTYPE HTML> <html ... -
Angularjs的directive封装ztree
2017-12-16 13:41 1235一般我们做web开发都会用到树,恰好ztree为我们提供了多种 ... -
AngularJS实战之cookie的读取
2017-11-21 12:53 985<!DOCTYPE html> <html ... -
AngularJS中$interval和$timeout的使用
2017-11-18 12:49 1167我们在项目中会出现定时刷新,延迟加载等多种场景。 接下来就看$ ... -
AngularJS实战之ngAnimate插件实现轮播
2017-11-08 21:44 1652第一步:引入angular-animate.js 第二步:注 ... -
基于Angular-animate.js和css实现的轮播图
2017-11-08 13:11 44<!DOCTYPE html> <html ... -
AngularJS监听数组变化
2017-10-22 12:55 1018我们在使用angualr的监听时候,业务的需要我们会去监听一个 ... -
AngularJS的$location基本用法和注意事项
2017-10-16 15:31 1201一、配置config app.config([ '$locat ... -
AngularJS 无限滚动加载数据控件 ngInfiniteScroll
2017-10-13 22:03 1882在开发中我们可能会遇到滚动鼠标到浏览器底部实现数据的加载,js ... -
AngularJS实战之ng-repeat的详细用法
2017-10-13 21:23 1749一、基本语法 {{$index}}:获取元素的下标。 {{$f ... -
ng-show和ng-if的区别和使用场景
2017-10-11 23:31 1562一、ng-show(ng-hide)和ng-if都是控制标签的 ... -
[置顶] AngularJS实战之路由ui-sref-active使用
2017-09-11 20:42 1248当我们使用angularjs的路由时,时常会出现一个需求,当选 ... -
AngularJS实战之路由ui-view传参
2017-08-25 00:50 1152angular路由传参 首页 <!DOCTYPE htm ... -
AngularJS实战之filter的使用二
2017-08-24 23:01 883博文一中的filter是angular自带的filter,一般 ... -
AngularJS实战之filter的使用一
2017-08-24 22:36 786一、格式化数字为货币格式。 <div>{{mon ... -
AngularJS实战之路由ui-view
2017-08-18 01:15 9241. 路由(ui-router) 1.1. 环境 1) ang ... -
AngularJs ng-repeat用法二$parent.$index
2017-07-22 18:38 1022我们在开发时时常会出现repeat嵌套使用的情况,此时会想获取 ...
相关推荐
今天小编就为大家分享一篇对angularjs框架下controller间的传值方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
本文实例讲述了Angularjs的Controller间通信机制。分享给大家供大家参考,具体如下: 在Angularjs开发一些经验总结中提到我们需要按照业务区分...对,这就是angularjs解决controller之间通信的机制,所推荐的唯一方
AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为
主要介绍了AngularJS 控制器 controller的详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
主要介绍了AngularJS控制器controller给模型数据赋初始值的方法,涉及AngularJS控制器controller简单赋值操作实现技巧,需要的朋友可以参考下
Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件,接下来通过本文给大家介绍AngularJS入门心得之directive和controller通信过程,对angularjs相关知识感兴趣的朋友一起学习吧
本文主要介绍AngularJs Understanding the Controller Component的内容,这里整理了相关资料,及简单示例代码,有兴趣的小伙伴可以参考下
本文实例讲述了AngularJS实现controller控制器间共享数据的方法。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app=myapp> <head> <title>www.jb51.net 控制器间共享数据</...
本文主要介绍AngularJS ng-controller 指令,这里对ng-controller指令资料的整理,并附代码示例和效果图,有需要的朋友看下
AngularJS Controller作用域.docx
因为大部分情况下,调用应该都是限于对业务逻辑层或者数据库层,并不会涉及Controller之间的调用。 本文是讨论Controller A必须调用Controller B的情况。 Controller A可以返回redirect和forward指令来进行跳转...
本篇文章主要介绍了angularJS+requireJS实现controller及directive的按需加载示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Java培训实战教程之 培训实战教程之angularJS的双向数据绑定 的双向数据绑定 angularJS介绍 介绍 AngularJS是完全使⽤JavaScript编写的客户端技术。同其他历史悠久的Web技术(HTML、CSS和JavaScript)配合使⽤,使...
本文的主要内容是介绍在AngularJS中怎样利用Controller实现URL跳转,本文给出了实例代码,简单明了,有需要的可以参考学习。