`
huangyongxing310
  • 浏览: 494456 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

AngularJs框架下controller间的传值方法

阅读更多
AngularJs框架下controller间的传值方法



第一种方式
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";
}
});

分享到:
评论

相关推荐

    对angularjs框架下controller间的传值方法详解

    总结来说,AngularJS中Controller间的通信主要有三种方式:作用域继承、事件广播(`$on`、`$emit`、`$broadcast`)以及服务。根据项目需求和性能考虑,可以选择最适合的方式来实现不同Controller之间的数据交互。在...

    两个controller相互传值

    在这个场景下,我们可以使用两种主要的方法:协议(Protocol)传值和控制器(Controller)传值。下面我们将详细探讨这两种方法。 ### 协议传值 #### 1. 定义协议 协议是一种定义特定功能或数据传递方式的方式。在...

    ASP.NET MVC学习笔记-Controller与View传值.

    ### ASP.NET MVC学习笔记-Controller与View传值 #### 一、引言 在ASP.NET MVC框架中,数据从Controller传递到View的方式是至关重要的。相比于传统的ASP.NET Web Forms模式,MVC架构更加注重分离关注点,即Model、...

    angularjs框架的仿卷皮网

    本项目“angularjs框架的仿卷皮网”就是一个典型的SPA实例,它展示了AngularJS在构建复杂Web应用时的能力,包括购物车功能、页面间数据传递以及懒加载等特性。 **1. AngularJS核心概念** AngularJS的核心是MVC...

    基于AngularJs框架的BootStrap模板整合

    AngularJS,由Google维护,是一款开源的JavaScript MVC(Model-View-Controller)框架,它极大地简化了前端开发,尤其是数据绑定和依赖注入等功能,使得开发者可以更专注于业务逻辑,而不是琐碎的DOM操作。...

    AngularJS框架搭建网站

    AngularJS是一款由Google维护的JavaScript框架,用于构建交互式的单页应用程序(SPA)。它通过将数据绑定和依赖注入等概念引入HTML,极大地简化了前端开发流程。本教程将深入讲解如何利用AngularJS来搭建网站。 1. ...

    AngularJS框架类库+自己研究实例总结+注释说明(源码)

    这个框架以其MVC(Model-View-Controller)架构、数据绑定和依赖注入等特性而闻名,极大地简化了前端开发工作。在这个"AngularJS框架类库+自己研究实例总结+注释说明(源码)"的压缩包中,你将找到关于AngularJS的...

    SpringMVC+REST+AngularJS框架

    **SpringMVC+REST+AngularJS框架详解** 在现代Web应用开发中,SpringMVC、RESTful API和AngularJS是三个关键的技术组件,它们共同构建了一个高效、灵活且可扩展的开发架构。本文将深入探讨这三大技术的核心概念以及...

    AngularJS 控制器 controller的详解

    在AngularJS框架中,控制器(controller)扮演着非常关键的角色。控制器是组织逻辑和视图的桥梁,它们通过作用域(scope)来与视图进行交互,从而实现对视图的动态更新和行为控制。 在本文中,我们将深入探讨...

    ssm+tiles框架,前后台传值与获取值(json)

    在"ssm+tiles框架,前后台传值与获取值(json)"的场景中,我们将讨论如何在这些框架下进行数据的传递,特别是利用JSON格式进行数据交换。 首先,我们需要确保所有必要的jar包已经包含在项目中。这包括Spring的核心...

    详解JavaScript的AngularJS框架中的作用域与数据绑定

    AngularJS框架是由Google公司开发的一套开源的JavaScript框架,用于构建动态网页应用程序。它采用MVC(Model-View-Controller,模型-视图-控制器)架构,特别适合开发单页应用程序(SPA)。AngularJS的核心价值在于...

    AngularJS实现controller控制器间共享数据的方法示例

    本文实例讲述了AngularJS实现controller控制器间共享数据的方法。分享给大家供大家参考,具体如下: &lt;!DOCTYPE html&gt; &lt;html ng-app=myapp&gt; &lt;head&gt; &lt;title&gt;www.jb51.net 控制器间共享数据&lt;/...

    详解JavaScript的AngularJS框架中的作用域与数据绑定_.docx

    在JavaScript的AngularJS框架中,作用域(Scope)和数据绑定是两个核心概念,它们极大地简化了前端开发的复杂性,特别是对于构建大型单页面应用(SPA)来说。AngularJS由Google发起,作为一款轻量级的MVC框架,它...

    实例剖析AngularJS框架中数据的双向绑定运用

    AngularJS框架中的数据双向绑定是该框架的核心特性之一,它极大地简化了Web应用开发中的数据同步问题。在双向绑定机制中,视图(View)与模型(Model)之间可以自动同步,当模型变化时,视图会自动更新,反之亦然。...

    在AngularJS框架中处理数据建模的方式解析

    我们知道,AngularJS并没有自带立等可用的数据建模方案。而是以相当抽象的方式,让我们在controller中使用JSON数据作为模型。但是随着时间的推移和项目的成长,我意识到这种建模的方式不再能满足我们项目的需求。在...

    AngularJS控制器controller正确的通信的方法

    AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为。 当我们在创建新的控制器时,...

    AngularJS Controller作用域.docx

    3. **事件广播与监听**:Controller可以通过 `$scope.$on()` 监听事件,而 `$scope.$emit()` 和 `$scope.$broadcast()` 可以用来在作用域树上向上或向下广播事件,实现不同Controller间的通信。 在JavaScript代码中...

    iOS视图间传值

    本文将详细介绍几种常用的iOS视图间传值方法,希望能对开发者提供实用的帮助。 1. **属性赋值**: 当两个视图控制器有直接关系,如一个视图控制器是另一个的子控制器或者通过导航控制器导航时,可以直接通过属性...

Global site tag (gtag.js) - Google Analytics