`
hudeyong926
  • 浏览: 2034864 次
  • 来自: 武汉
社区版块
存档分类
最新评论

angularjs 在controller间分享数据

 
阅读更多
Blood 血腥的方法

每个controller都有自己的scope, 同时也可以共享他们老爸的scope内的数据。如果我们想让两个controller共享数据的化, 有多种方法。 最直接血腥的就是在他们老爸的scope里定义一个model。

需要注意的是, 必须定义一个对象, 并且在每个controller里都是修改这个对象的属性。比如在FirstController里的setName 里修改name: person.name = ‘Jack’ , 如果你在setName里 person = {name: ‘Jack’} 呵呵, 效果大家自己试试, 原因是js的prototype的特性。

这个方法血腥的原因是所有共享的数据都要在上级定义, 如果子controller多了, 共享数据是指数级上升的, 如此老爸的负担会超大。那些controller共享了那些数据会很模糊。而且测试非常空难。最后一条对于不正经的js开发人员, 估计不是什么问题。

Elegant 优雅的方法

什么才不是血腥的呢?angularjs最突出的特殊之一就是DI, 也就是注入, 利用factory把需要共享的数据注入给需要的controller可以干净漂亮的解决这个问题。

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控制器间共享数据的方法。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app=myapp> <head> <title>www.jb51.net 控制器间共享数据</...

    大漠老师在W3CTech上分享的AngularJS内容【PPT】

    大漠老师的分享深入浅出,结合实例展示了AngularJS在实际项目中的应用。通过学习这个PPT,开发者能够更好地理解和掌握AngularJS的精髓,提升开发下一代Web应用的能力。在Web开发快速发展的今天,理解并熟练运用...

    angularjs开发文档

    在提供的压缩包文件中,包含了多份AngularJS的学习资料,如"AngularJS学习笔记 - 进出自由,我的分享.mht"、"AngularJS开发指南"、"AngularJs学习笔记"和"AngularJS入门教程"。这些资源将帮助你深入理解AngularJS的...

    angularjs学习笔记

    通过`ng-controller`指令,我们可以定义控制器,并在其中注入服务,如`$scope`,用于绑定数据和处理用户事件。 ```javascript app.controller('MyController', function($scope) { $scope.message = 'Hello, ...

    AngularJS UI Development

    - **最佳实践**:分享AngularJS开发中的一些最佳实践,如遵循DRY原则(Don't Repeat Yourself)、使用命名空间避免变量冲突、合理使用依赖注入等。 综上所述,AngularJS作为一个成熟的前端开发框架,为开发者提供了...

    别责怪框架:我使用AngularJS和ReactJS的经验.pdf

    对于ReactJS和AngularJS的使用经验,文章很可能会分享一些具体的实现技巧和最佳实践,比如如何在React中实现数据的异步获取,以及如何在AngularJS中组织代码结构和管理依赖。其中“HTTP”、“promise”、“Axios”、...

    AngularJS快速入门教程

    - **双向数据绑定**:AngularJS最显著的特点之一就是其强大的双向数据绑定机制。这意味着模型和视图之间的数据同步是自动完成的,无需显式地编写更新视图或模型的代码。 - **依赖注入**:依赖注入是一种设计模式,它...

    ng-book The Complete Book on AngularJS

    在书中,作者会首先介绍AngularJS的基础,包括如何创建第一个AngularJS应用、指令的使用、表单处理以及数据绑定。接着,深入讲解服务(Services)、过滤器(Filters)、控制器(Controllers)和指令(Directives)的...

    AngularJS开发下一代Web应用

    在AngularJS中,MVC模式帮助开发者将应用分为三个部分:模型(Model)负责数据,视图(View)负责展示,控制器(Controller)负责逻辑和视图的交互。这种架构不仅有助于代码的组织,还方便了应用的测试、扩展和维护...

    AngularJS-in-Action

    - 控制器(Controller)是AngularJS的核心组件之一,负责处理业务逻辑并与作用域交互。 4. **服务与依赖注入** - AngularJS支持通过依赖注入(DI)来管理对象间的依赖关系,使得代码更加模块化、易于测试。 - ...

    AngularJS学习笔记.pdf

    尽管本文档着重于基础知识和个人学习经历的分享,但对于初学者来说,它依然是一份宝贵的资源,可以帮助他们快速入门 AngularJS 并掌握其核心概念。随着实践的深入和技术的发展,AngularJS 的使用场景也在不断扩展,...

    前端 - 贺天卓《使用 AngularJS 构建RIA前端架构实践》.pdf

    AngularJS实现的是一种变种的MV*模式,在它里面并没有明确的“Controller”概念,取而代之的是“指令”(directives)和“控制器”(controllers),并且视图和模型的绑定是自动的。 5. 双向绑定(Two-way Data ...

    Mastering Web Application Development with AngularJS.pdf

    他在书中分享了他对于客户端和服务端黑客技术的经验以及对于AngularJS项目的贡献。 书中还提到了许多其他参与本书出版过程的重要角色,例如项目协调员、技术编辑、技术审查者、校对者、索引编制者、图形设计者等,...

    jQuery的时间datetime控件在AngularJs中的使用实例(分享)

    总结起来,jQuery的datetime控件在AngularJS中可以通过监听事件和手动调用`$apply`来实现与AngularJS双向数据绑定的兼容。然而,为了遵循AngularJS的最佳实践,应该考虑使用专门为AngularJS设计的解决方案,以减少...

    AngularJS入门教程之MVC架构实例分析

    MVC的核心思想是將数据的管理(Model)、业务逻辑控制(Controller)和数据的展示(View)分离开来,使程序的逻辑性和可维护性更强。 对于AngularJS应用来说,视图(View)是DOM(文档对象模型),你可以理解为就是...

    angularjs封装bootstrap时间插件datetimepicker

    AngularJS作为一个强大的MVC(Model-View-Controller)框架,提供了数据绑定和依赖注入等特性,极大地简化了前端开发。而Bootstrap则是一个用于快速构建响应式和移动优先的网站的CSS框架,包含了一系列组件和插件,...

    angularjs实现与服务器交互分享

    3. **更新视图**:最后,在成功处理响应后,你需要更新视图以显示从服务器获取的数据。 #### 四、示例代码分析 下面是一个具体的示例,展示了如何使用`$http`服务从服务器获取商品列表,并将其展示在页面上。 ```...

    spring4+springdatajpa+springmvc+angularjs+bootstrap+maven

    在博文链接中(由于实际链接不可用,这里无法提供具体细节),作者可能分享了如何集成这些技术,创建一个完整的Web应用,包括设置项目结构、配置依赖、编写控制器、创建数据访问对象(DAO)、设计前端视图以及部署...

    ng-qr-code:在 AngularJS 中即时生成二维码

    **ng-qr-code: 在AngularJS中...它的实时更新功能和丰富的配置选项使其在各种应用场景中都非常实用,例如产品信息展示、链接分享、电子票务等。只需几步简单的配置,你就能轻松将二维码功能集成到你的AngularJS项目中。

    AngularJS-Social-Network

    AngularJS遵循Model-View-Controller(MVC)设计模式,将应用逻辑分为三个主要部分:模型(Model)负责存储数据,视图(View)用于展示数据,控制器(Controller)处理用户交互并协调模型与视图。 ### 3. 指令系统 ...

Global site tag (gtag.js) - Google Analytics