- 浏览: 498759 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (502)
- Java (70)
- Linux (10)
- 数据库 (38)
- 网络 (10)
- WEB (13)
- JSP (4)
- 互联网 (71)
- JavaScript (30)
- Spring MVC (19)
- HTML (13)
- CSS (3)
- AngularJS (18)
- Redis (5)
- Bootstrap CSS (1)
- ZooKeeper (4)
- kafka (6)
- 服务器缓存 (4)
- Storm (1)
- MongoDB (9)
- Spring boot (16)
- log4j (2)
- maven (3)
- nginx (5)
- Tomcat (2)
- Eclipse (4)
- Swagger (2)
- Netty (5)
- Dubbo (1)
- Docker (7)
- Hadoop (12)
- OAuth (1)
- webSocket (4)
- 服务器性能 (7)
- Session共享 (1)
- tieye修改 (1)
- 工作 (1)
- 有用的语录 (0)
- https (2)
- common (5)
- 产品开发管理 (1)
- CDN 工作原理 (1)
- APNS、GCM (1)
- 架构图 (3)
- 功能实现分析 (1)
- JMX (1)
- 服务器相关操作命令 (1)
- img02 (0)
- 服务器环境搭建 (9)
- goodMenuBook (1)
- CEInstantPot (0)
- 有用数据 (1)
- 百度地图WEB API (2)
- 正则表达式 (1)
- 样式例子 (2)
- staticRecipePressureCooker.zip (1)
- jCanvas (1)
- 网站攻击方法原理 (1)
- 架构设计 (3)
- 物联网相关 (3)
- 研发管理 (7)
- 技术需求点 (1)
- 计划 (1)
- spring cloud (11)
- 服务器开发的一些实用工具和方法 (1)
- 每天学到的技术点 (4)
- Guava (1)
- ERP 技术注意要点 (2)
- 微信小程序 (1)
- FineRepor (1)
- 收藏夹 (1)
- temp (5)
- 服务架构 (4)
- 任职资格方案 (0)
- osno_test (1)
- jquery相关 (3)
- mybatis (4)
- ueditor (1)
- VueJS (7)
- python (10)
- Spring EL (1)
- shiro (1)
- 前端开发原理与使用 (7)
- YARN (1)
- Spark (1)
- Hbase (2)
- Pig (2)
- 机器学习 (30)
- matplotlib (1)
- OpenCV (17)
- Hystrix (1)
- 公司 (1)
- miniui (4)
- 前端功能实现 (3)
- 前端插件 (1)
- 钉钉开发 (2)
- Jenkins (1)
- elasticSearch使用 (2)
- 技术规范 (4)
- 技术实现原理 (0)
最新评论
AngularJs框架下controller间的传值方法
第一种方式
angularJS中默认情况下,当前作用域中无法找到某个属性时,就会在父级作用域中进行查找,若找不到直至查找到$rootScope。
如果在$rootScope中也无法找到程序依旧运行,但视图不会更新。
第二种方式
$on、$emit和$broadcast使得event、data在controller之间的传递变的简单
$emit只能向parent controller传递event与data
$broadcast只能向child controller传递event与data
$on用于接收event与data //
第三种方式
利用angularJS中service单例模式的特性,服务(service)提供了一种能在应用的整个生命周期内保持数据的方式,
能够在控制器之间进行通信,且能保证数据的一致性。
第一种方式
angularJS中默认情况下,当前作用域中无法找到某个属性时,就会在父级作用域中进行查找,若找不到直至查找到$rootScope。
如果在$rootScope中也无法找到程序依旧运行,但视图不会更新。
//Javascript app.controller('ParentController', function($scope) { $scope.person = {greeted: false}; }); app.controller('ChildController', function($scope) { $scope.sayHello = function() { $scope.person.name = 'Ari Lerner'; }; }); //HTML <div ng-controller="ParentController"> <div ng-controller="ChildController"> <a ng-click="sayHello()">Say hello</a> </div> {{ person }} </div> //result {"greeted":false, "name": "Ari Lerner"}
第二种方式
$on、$emit和$broadcast使得event、data在controller之间的传递变的简单
$emit只能向parent controller传递event与data
$broadcast只能向child controller传递event与data
$on用于接收event与data //
JavaScript app.controller('ParentController', function($scope) { $scope.$on('$fromSubControllerClick', function(e,data){ console.log(data); // hello }); }); app.controller('ChildController', function($scope) { $scope.sayHello = function() { $scope.$emit('$fromSubControllerClick','hello'); }; }); //HTML <div ng-controller="ParentController"> <div ng-controller="ChildController"> <a ng-click="sayHello()">Say hello</a> </div> </div>
第三种方式
利用angularJS中service单例模式的特性,服务(service)提供了一种能在应用的整个生命周期内保持数据的方式,
能够在控制器之间进行通信,且能保证数据的一致性。
JavaScript var myApp = angular.module("myApp", []); myApp.factory('Data', function() { return { name: "Ting" } }); myApp.controller('FirstCtrl', function($scope, Data) { $scope.data = Data; $scope.setName = function() { Data.name = "Jack"; } }); myApp.controller('SecondCtrl', function($scope, Data) { $scope.data = Data; $scope.setName = function() { Data.name = "Moby"; } });
发表评论
-
lazyLoad
2017-05-10 00:11 566<!DOCTYPE html> <html ... -
timer
2017-05-10 00:17 426<!DOCTYPE html> <html ... -
滚动到指定元素、判断对象是否为空
2017-05-10 00:16 715<!DOCTYPE html> <html ... -
Http请求封装
2017-05-09 22:21 550<!DOCTYPE html> <html ... -
上传文件内容改变和上传文件
2017-05-09 21:56 507<!DOCTYPE html> <html ... -
ng-click参数传递
2017-05-09 21:35 949<!DOCTYPE html> <html ... -
promise(js里很多服务的then实现分析)
2016-09-14 01:07 948promise(很多少服务的then) 1、promise ... -
AngularJs directive(指令)
2016-09-14 01:07 892AngularJs directive(指令) ... -
Anguar 工作过程
2016-09-14 01:05 370Anguar 工作过程 Anguar的指令编译过程: 1 ... -
AngularJS Ajax($http)
2016-09-14 01:07 813AngularJS Ajax($http) 1.$http ... -
Angularjs run(AngularJS应用中第一个被执行的方法)
2016-09-15 13:10 613Angularjs run(AngularJS应用中第一个被执 ... -
$on、$emit和$broadcast的使用
2016-09-13 15:04 641$on、$emit和$broadcast的使用 如何在作 ... -
AngularJs API
2016-09-13 14:59 592AngularJs API 以下列出了一些通用的 API ... -
AngularJS 路由
2016-09-13 14:58 602AngularJS 路由 AngularJS 路由允许我们 ... -
AngularJS $location
2016-09-13 14:46 632AngularJS $location $location ... -
AngularJS中service,factory,provider的区别
2016-09-13 09:30 613AngularJS中service,factory ... -
AngularJS基础
2016-09-17 20:52 427AngularJS基础 AngularJS 是 ...
相关推荐
总结来说,AngularJS中Controller间的通信主要有三种方式:作用域继承、事件广播(`$on`、`$emit`、`$broadcast`)以及服务。根据项目需求和性能考虑,可以选择最适合的方式来实现不同Controller之间的数据交互。在...
在这个场景下,我们可以使用两种主要的方法:协议(Protocol)传值和控制器(Controller)传值。下面我们将详细探讨这两种方法。 ### 协议传值 #### 1. 定义协议 协议是一种定义特定功能或数据传递方式的方式。在...
### ASP.NET MVC学习笔记-Controller与View传值 #### 一、引言 在ASP.NET MVC框架中,数据从Controller传递到View的方式是至关重要的。相比于传统的ASP.NET Web Forms模式,MVC架构更加注重分离关注点,即Model、...
本项目“angularjs框架的仿卷皮网”就是一个典型的SPA实例,它展示了AngularJS在构建复杂Web应用时的能力,包括购物车功能、页面间数据传递以及懒加载等特性。 **1. AngularJS核心概念** AngularJS的核心是MVC...
AngularJS,由Google维护,是一款开源的JavaScript MVC(Model-View-Controller)框架,它极大地简化了前端开发,尤其是数据绑定和依赖注入等功能,使得开发者可以更专注于业务逻辑,而不是琐碎的DOM操作。...
AngularJS是一款由Google维护的JavaScript框架,用于构建交互式的单页应用程序(SPA)。它通过将数据绑定和依赖注入等概念引入HTML,极大地简化了前端开发流程。本教程将深入讲解如何利用AngularJS来搭建网站。 1. ...
这个框架以其MVC(Model-View-Controller)架构、数据绑定和依赖注入等特性而闻名,极大地简化了前端开发工作。在这个"AngularJS框架类库+自己研究实例总结+注释说明(源码)"的压缩包中,你将找到关于AngularJS的...
**SpringMVC+REST+AngularJS框架详解** 在现代Web应用开发中,SpringMVC、RESTful API和AngularJS是三个关键的技术组件,它们共同构建了一个高效、灵活且可扩展的开发架构。本文将深入探讨这三大技术的核心概念以及...
在AngularJS框架中,控制器(controller)扮演着非常关键的角色。控制器是组织逻辑和视图的桥梁,它们通过作用域(scope)来与视图进行交互,从而实现对视图的动态更新和行为控制。 在本文中,我们将深入探讨...
在"ssm+tiles框架,前后台传值与获取值(json)"的场景中,我们将讨论如何在这些框架下进行数据的传递,特别是利用JSON格式进行数据交换。 首先,我们需要确保所有必要的jar包已经包含在项目中。这包括Spring的核心...
AngularJS框架是由Google公司开发的一套开源的JavaScript框架,用于构建动态网页应用程序。它采用MVC(Model-View-Controller,模型-视图-控制器)架构,特别适合开发单页应用程序(SPA)。AngularJS的核心价值在于...
本文实例讲述了AngularJS实现controller控制器间共享数据的方法。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app=myapp> <head> <title>www.jb51.net 控制器间共享数据</...
在JavaScript的AngularJS框架中,作用域(Scope)和数据绑定是两个核心概念,它们极大地简化了前端开发的复杂性,特别是对于构建大型单页面应用(SPA)来说。AngularJS由Google发起,作为一款轻量级的MVC框架,它...
AngularJS框架中的数据双向绑定是该框架的核心特性之一,它极大地简化了Web应用开发中的数据同步问题。在双向绑定机制中,视图(View)与模型(Model)之间可以自动同步,当模型变化时,视图会自动更新,反之亦然。...
我们知道,AngularJS并没有自带立等可用的数据建模方案。而是以相当抽象的方式,让我们在controller中使用JSON数据作为模型。但是随着时间的推移和项目的成长,我意识到这种建模的方式不再能满足我们项目的需求。在...
AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为。 当我们在创建新的控制器时,...
3. **事件广播与监听**:Controller可以通过 `$scope.$on()` 监听事件,而 `$scope.$emit()` 和 `$scope.$broadcast()` 可以用来在作用域树上向上或向下广播事件,实现不同Controller间的通信。 在JavaScript代码中...
本文将详细介绍几种常用的iOS视图间传值方法,希望能对开发者提供实用的帮助。 1. **属性赋值**: 当两个视图控制器有直接关系,如一个视图控制器是另一个的子控制器或者通过导航控制器导航时,可以直接通过属性...