当前位置: 首页 > 编程笔记 >

Angularjs的Controller间通信机制实例分析

龙珂
2023-03-14
本文向大家介绍Angularjs的Controller间通信机制实例分析,包括了Angularjs的Controller间通信机制实例分析的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了Angularjs的Controller间通信机制。分享给大家供大家参考,具体如下:

在Angularjs开发一些经验总结中提到我们需要按照业务区分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需要在controller中通信,一般为比较简单的通信机制,告诉同伴controller我的某个你所关心的东西改变了,怎么办?如果你是一个javascript程序员你会很自然的想到异步回调响应式通信—事件机制(或消息机制)。对,这就是angularjs解决controller之间通信的机制,所推荐的唯一方式,简而言之这就是angular way。

Angularjs为在scope中为我们提供了冒泡和隧道机制,$broadcast会把事件广播给所有子controller,而$emit则会将事件冒泡传递给父controller,$on则是angularjs的事件注册函数,有了这一些我们就能很快的以angularjs的方式去解决angularjs controller之间的通信,代码如下:

View:

<div ng-app="app" ng-controller="parentCtr">
  <div ng-controller="childCtr1">name :
    <input ng-model="name" type="text" ng-change="change(name);" />
  </div>
  <div ng-controller="childCtr2">Ctr1 name:
    <input ng-model="ctr1Name" />
  </div>
</div>

Controller:

angular.module("app", []).controller("parentCtr",
function ($scope) {
  $scope.$on("Ctr1NameChange",
  function (event, msg) {
    console.log("parent", msg);
    $scope.$broadcast("Ctr1NameChangeFromParrent", msg);
  });
}).controller("childCtr1", function ($scope) {
  $scope.change = function (name) {
    console.log("childCtr1", name);
    $scope.$emit("Ctr1NameChange", name);
  };
}).controller("childCtr2", function ($scope) {
  $scope.$on("Ctr1NameChangeFromParrent",
  function (event, msg) {
    console.log("childCtr2", msg);
    $scope.ctr1Name = msg;
  });
});

这里childCtr1的name改变会以冒泡传递给父controller,而父controller会对事件包装在广播给所有子controller,而childCtr2则注册了change事件,并改变自己。注意父controller在广播时候一定要改变事件name。

jsfiddle链接:http://jsfiddle.net/whitewolf/5JBA7/15/

希望本文所述对大家AngularJS程序设计有所帮助。

 类似资料:
  • 本文向大家介绍AngularJS控制器controller正确的通信的方法,包括了AngularJS控制器controller正确的通信的方法的使用技巧和注意事项,需要的朋友参考一下 AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为。 当我们在

  • 本文向大家介绍Angularjs实现控制器之间通信方式实例总结,包括了Angularjs实现控制器之间通信方式实例总结的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Angularjs实现控制器之间通信方式。分享给大家供大家参考,具体如下: 利用angularjs开发项目中,控制器之间的通信,比如参数的传递,数据的传递,都是比较常见的。控制器之间的通信,显得尤为重要。常见的方式有如下两种:

  • 本文向大家介绍PHP的消息通信机制测试实例,包括了PHP的消息通信机制测试实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了PHP的消息通信机制。分享给大家供大家参考,具体如下: 更多关于PHP相关内容感兴趣的读者可查看本站专题:《php curl用法总结》、《php socket用法总结》、《PHP网络编程技巧总结》、《php面向对象程序设计入门教程》、《PHP数组(Array)操作技

  • 本文向大家介绍php中socket通信机制实例详解,包括了php中socket通信机制实例详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了php中socket通信机制及用法。分享给大家供大家参考。具体分析如下: 一、socket是什么 什么是socket 所谓socket通常也称作"套接字",用于描述ip地址和端口,是一个通信链的句柄。应用程序通常通过"套接字"向网络发出请求或者应答网

  • 2.5 通信机制实操 本节主要是通过ROS内置的turtlesim案例,结合已经介绍ROS命令获取节点、话题、话题消息、服务、服务消息与参数的信息,最终再以编码的方式实现乌龟运动的控制、乌龟位姿的订阅、乌龟生成与乌龟窗体背景颜色的修改。 目的:熟悉、强化通信模式应用

  • 本文向大家介绍AngularJS开发教程之控制器之间的通信方法分析,包括了AngularJS开发教程之控制器之间的通信方法分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了AngularJS开发教程之控制器之间的通信方法。分享给大家供大家参考,具体如下: 一、指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式)