Angular 中控制器之间的通信

2024-05-10

我熟悉以下实现控制器之间通信的方法。

还有其他人吗?有更好的方法/最佳实践吗?


$broadcast/$emit

.controller("Parent", function($scope){
  $scope.$broadcast("SomethingHappened", {..});
  $scope.$on("SomethingElseHappened", function(e, d){..});
})
.controller("Child", functions($scope){
  $scope.$broadcast("SomethingElseHappened", {..});
  $scope.$on("SomethingHappened", function(e, d){..});
})
.controller("AnotherChild", functions($scope){
  $scope.$on("SomethingHappened", function(e, d){..});
});

或者,从视图:

<button ng-click="$broadcast('SomethingHappened', data)">Do Something</button>

优点:

  • 适合一次性活动

缺点:

  • 兄弟姐妹之间不起作用,除非有共同的祖先,例如$rootScope, 用来

函数的范围继承

<div ng-controller="Parent">
  <div ng-controller="Child">
    <div ng-controller="ChildOfChild">
       <button ng-click="someParentFunctionInScope()">Do</button>
    </div>
  </div>
</div>

或者,在代码中

.controller("ChildOfChild", function($scope){
   $scope.someParentFunctionInScope();
});

优点:

  • 有利于自上而下的数据传播

缺点:

  • 对于自下而上来说不太好,因为它需要一个对象(而不是基元)
  • 调用祖先函数会产生紧密耦合
  • 兄弟姐妹之间不起作用,除非有共同的祖先,例如$rootScope, 用来

范围继承 +$watch

控制器仅对范围公开的数据的变化做出反应,并且从不调用函数。

.controller("Parent", function($scope){
  $scope.VM = {a: "a", b: "b"};
  $scope.$watch("VM.a", function(newVal, oldVal){
    // react
  });
}

优点:

  • 适合不是由控制器创建的子作用域,例如就像里面一样ng-repeat

缺点:

  • 对于一次性事件根本不起作用
  • 代码可读性不太好

其他值得注意的提及:

  • 具有专业功能的共享服务
  • 更通用的 Pub/Sub 服务
  • $rootScope

As Samuel https://stackoverflow.com/users/118703/samuel-neff也就是说,使用服务来共享数据是一种推荐的方法。这个想法是,无论任何控制器如何,数据的状态都保持一致。 这两篇文章可以让您了解“如何”和“为什么”:在控制器之间共享数据 https://thinkster.io/egghead/sharing-data-between-controllers/, angularjs 控制器的状态 http://jonathancreamer.com/the-state-of-angularjs-controllers/.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 中控制器之间的通信 的相关文章

  • Angular UI 网格 - 选定行上的单击事件

    Target 我有一个 UI 网格 当我单击一行时 它应该被选中 并且应该调用以该行作为参数的函数 目前的方法 我使用以下配置代码来生成网格 scope gridOptions enableFiltering true enableRowH
  • Require('child_process') => 找不到 Require / child_process + launch .bat

    我已经在论坛上搜索了三天的方法来让我的程序工作 但它仍然不起作用 我正在尝试我的第一个 AngularJS 项目 我需要启动外部程序当用户单击图像时 我有一个名为 tool list 的模块 在我的 tool list component
  • 更新 Angularjs 和 Momentjs 中的“时间之前”值

    原文 我有一个用 ng repeat 生成的表 其中包含数百个条目 其中包含几个不同的 unix 时间戳 我使用 moment js 让它们显示为 19 分钟前 或无论多久之前 例如 我如何每五分钟更新一次 而不必刷新整个表 这需要几秒钟并
  • 使用 ngSanitize 在 HTML 中注入“ng-click”

    我正在使用 Angular 进行本地化 但我遇到了最后一件事 我有这个 json blob key need to login value You need to a log in a to add an event description
  • 告诉 Angular Js 忽略特定路由

    我已经在 Angular 中设置了路由 一切正常 locationProvider html5Mode true routeProvider when templateUrl Home Index when User templateUrl
  • 从元素中动态解除 ng-click 的绑定:angularjs

    我有一个具有 ng click 事件的元素 单击它会添加一个工作正常的 div 我想要的是添加 div 后删除 ng click 一种方法是使用 ng if div span i add a div span div div class d
  • Protractor Internet Explorer 缓慢

    我一直在尝试让 Internet Explorer 11 在 Protractor 下运行 以完成我为新的 AngularJS 项目进行的一套测试 我在 Windows 7 64 位下运行 并已下载并安装了 64 位的 Selenium I
  • 如何克隆 Angular UI 树中的节点?

    如何克隆 Angular UI 树中所有子节点的节点 现在我使用事件点击 ng click newSubItem this where newSubItem是函数 scope newSubItem function scope var no
  • 奇怪的 Angular-ChartJS 问题,在 Ionic App 中无法正确显示

    我正在使用 AngularJS 构建一个 Ionic 应用程序 在此应用程序中 我想要一个数据折线图 昨天我问了一个关于这个的问题 Angular Chart 不渲染任何内容 https stackoverflow com question
  • Angular ng-repeat 导致闪烁

    我正在使用以下代码显示缩略图列表 div class channel img class channel img div 在控制器中 我有一个 ajax 请求 它可以获取新的缩略图 因此 Angular 会更新图像 但会导致闪烁 有没有办法
  • Angular 中的动态标签生成

    我正在尝试使用包含一堆指令名称的数组动态生成表单 scope components textbox textbox radio checkbox label 我想使用 Angular 生成具有这些名称的标签 例如
  • Angularjs - $http 成功与当时

    我想问一下这个方法有什么区别 我关心的是 then 和 success function 和 error 之间的区别 谢谢 Simple GET request example http method GET url someUrl the
  • 使用 angularjs 进行动态 url 路由

    我的代码中有类似的东西 ul p b item name b p 例如 我有 3 件商品 宝马 高尔夫和梅赛德斯 我想要一个包含每个项目名称的 url 例如 bmw 或 mercedes 并且所有 url 使用details html 来显
  • 用模板替换 ng-include 节点?

    对角度有点陌生 是否有可能replace包含模板内容的 ng include 节点 例如 与 div div src div div 生成的html为 div div src div div
  • 从 Rest API 响应内容处置输出中下载 javascript 中的 excel 文件 [对象,对象]

    我想从我的 angularJs 代码下载一个 excel 文件 我向 Java Rest API 发出 http post 请求并返回带有标头的文件 Content Disposition 附件 文件名 new excel file xls
  • 如何在 Amserial 图表中添加图例

    我在 AngularJS 应用程序中使用 Amcharts 创建一个简单的条形图 以下是我在控制器中的代码 let empChart let empBarGraph let empLine const writeemp data gt co
  • Angularjs 中的动态表单名称属性

    当动态创建 inputName 时 人们将如何使用 formName inputName valid
  • AngularJS:从控制器内读取路由参数

    如何在 AngularJS 控制器中读取 URL 中的参数 假设我有一个像这样的网址http localhost var value我希望将该值存储在控制器内的变量中 var value URL 我尝试过使用 routeParams val
  • Angularjs UI 模态表单

    我曾经使用引导模式有一个登录对话框 scope loginDialog backdrop true keyboard true windowClass modal loginDialog backdropClick true templat
  • 如何测试 AngularJS 指令

    我正在开发一个将使用 AngularJS 的 Rails 3 2 应用程序 我可以让 Angular 做我需要的事情 但我很难弄清楚如何测试我正在做的事情 我正在使用guard jasmine 使用 PhantomJS 运行 Jasmine

随机推荐