Angular:更新服务并在控制器之间共享数据

2023-12-05

我正在使用服务从 API 获取一些数据:

angular.module('myApp', [])
.factory('myService', function($q, $timeout) {
    var getMessages = function() {
        var deferred = $q.defer();

        $timeout(function() {
            deferred.resolve('Hello world!');
        }, 2000);

        return deferred.promise;
    };

  return {
    getMessages: getMessages
  };

});

我在多个控制器中使用这些数据。

function ControllerA($scope, myService) {
    $scope.message = myService.getMessages();
    $scope.updateMessage = function(){
        $scope.message = 'Hello Max';        
    };
}

function ControllerB($scope, myService) {
    $scope.message = myService.getMessages();
    $scope.$watch('message', function(){
       // 'Hello Max'
    }, true);
}

我想更新每个控制器中的数据,但是当我更改 ControllerA 中的 $scope.message 时,它​​不会触发 ControllerB 中的更改。

EDIT:问题是我想避免使用“$broadcast”和“$on”。

有任何想法吗?

这是一个jsfiddle:http://jsfiddle.net/Victa/McLQD/


您可以使用$broadcast将事件广播到rootScope并使用$on定义侦听器来侦听此特定事件。

function ControllerA($scope, myService, $rootScope) {
    $scope.message = myService.getMessages();
    $scope.updateMessage = function () {
        $scope.message = 'Hello Max';

        $rootScope.$broadcast("HelloEvent", {
            msg: $scope.message
        });
    };
}

function ControllerB($scope, myService, $rootScope) {
    $scope.message = myService.getMessages();

    $rootScope.$on("HelloEvent", function (event, message) {
        $scope.message = message.msg;
    });
}

Updated:

在您更新问题之前我得到了上述解决方案。如果您不想使用 $broadcast 或 $on,您可以通过以下方式共享该对象$rootScop喜欢这个

function ControllerA($scope, myService, $rootScope) {
    $scope.message = myService.getMessages();
    $scope.updateMessage = function () {
        $scope.message = 'Hello Max';
        $rootScope.message = 'Hello Max';
    };
}

function ControllerB($scope, myService, $timeout, $rootScope) {
    $scope.message = myService.getMessages();

    $rootScope.$watch('message', function (oldV, newV) {
        if(oldV === undefined && oldV === newV) return;
        $scope.message = $rootScope.message;
    });
}

Demo using broadcast Demo without using broadcast

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

Angular:更新服务并在控制器之间共享数据 的相关文章

随机推荐

  • CMake 设置默认搜索路径?

    我只是不想每次需要库时都设置环境变量 更不用说搜索的路径根本不标准化 至少在 Windows 上 一般来说 Find cmake 不会指定任何与 Windows 相关的位置 有没有某种方法可以使 CMake 搜索指定目录 强制配置错误的 F
  • 在Java中求多项式的根

    我需要找到一个 近似的 数值的 解勒让德多项式 我尝试了几个Java库 但没有一个有我正在寻找的东西 最接近的是commons math 它甚至有用于在拉盖尔求解器 但它没有公开该方法 是否有现有的解决方案或者我需要实施自己的解决方案 您可
  • Xamarin 中的调用目标引发了异常

    这是代码 运行它看看有什么问题 gt https github com x0axz CustomRenderer 在我的 Xamarin 应用程序中 有一个适用于 Android 的自定义相机渲染器 它是从ViewModel通过Messag
  • 如何在Python中导入类型提示的类?

    我有一个代码 from pandas import DataFrame def func df DataFrame gt DataFrame 因为我实际上并没有在代码中创建 DataFrame 对象 所以我想做 from typing im
  • 在其中创建 Angular 生命周期挂钩的 Highcharts 实例

    我目前正在使用 Angular 7 高图表API 我使用以下方法集成了 Highcharts官方 Github 链接 有一个callbackFunction在 Highcharts 中我们可以使用它来获取图表实例 但是 我还没有弄清楚两件事
  • 如何选择要在 TensorBoard 的嵌入选项卡中查看的检查点?

    简短的问题 如何选择在 TensorBoard 的嵌入选项卡中查看哪个检查点 问题的较长版本 我想用 TensorBoard 可视化词嵌入 为此 在阅读完官方教程 mirror 我添加了以下代码 embedding writer tf su
  • 调用托管属性的 getter 时出现 NPE

    我正在使用 Hibernate 学习 Spring 并使用 JSF 作为前端框架创建一个电影租赁应用程序 我的注册 bean 中有一个应用程序范围的托管属性 它是视图范围的 在里面register 方法将用户详细信息插入数据库中 我调用服务
  • C 代码中的内联汇编语句和适用于 ARM Cortex 架构的扩展 ASM

    我正在尝试编译以下两段代码ARM编译器5对于 Cortex A 微处理器 Part 1 static inline void cp15 write sctlr uint32 t value asm mcr p15 0 0 c1 c0 0 r
  • jQuery 与 ASP.NET WebForms - 禁用文本框

    另一个 jQuery 新手问题 我做错了什么 我有一些由 ASP NET 3 5 Webforms 呈现的 HTML 标记 如下所示
  • 更新 Android 联系人提供程序中的联系人图像

    我创建一个应用程序来读取 更新 删除联系人详细信息 这是更新 Contact Image 时出现的问题 当应用程序外部的设备添加新联系人时 没有图像 那么我们就无法更新联系人图片 我的更新代码是 ops add ContentProvide
  • 使用一个全局资源在 ASP.NET Web 表单中进行本地化

    我想要一些这样的资源文件 Mui resx Mui fr resx Mui es resx 我希望能够在我的代码隐藏中做这样的事情 Label1 Text Mui Hello 在我的 aspx 中是这样的 有人知道该怎么做吗 是否可以 对的
  • 如何从 VB.NET 打开 Outlook“新邮件”窗口

    我有一个场景 用户可以从网格中进行选择 已将文件上传到本地文件夹 当用户按 发送 时 应用程序应打开 Outlook 新邮件消息 窗口 其中选择的文件作为附件 用户选择的文件 来自网格 任何帮助将不胜感激 Imports System Di
  • 如何在 J2ME 中修改 XML 的值?

    假设有一个XML in my J2ME应用
  • CImg 的编译错误

    我是第一次使用 CImg 库 在使用仅包含 CImg h 的简单测试程序时出现编译错误 这是为什么 我怎样才能解决这个问题 程序代码 include headers CImg h using namespace cimg library i
  • Firebase 电子邮件验证不适用于 ActionCodeSetting

    我正在尝试实现对用户电子邮件的验证 使用电子邮件模板中的默认验证 URL 以及 ActionCodeSetting URL 动态链接 以将用户带回应用程序 我对 Firebase 的 ActionCodeSetting 电子邮件验证应该如何
  • 如何删除firestore集合数据库中的所有文档

    我使用 Firestore 数据库来存储和检索数据 每天晚上 Firestore 集合中都需要有新的数据集 文档 可用 那么有没有办法一次性完全删除集合中的所有现有文档 我尝试了那里的文档 它说我们需要一一删除 这是不可能的 因为文档ID是
  • 如何在 WinRT 中将字符串绘制到位图图像

    如何在图像中绘制字符串winRT 在 WinForms 中可以使用drawstring 里面的方法system drawing命名空间 但我在 WinRT API 中找不到其等效项 在 Windows 8 1 中 它们最终支持将 XAML
  • 如何在 PHP 中创建 Hashcash

    在网上搜索后 我找不到有关如何在 php 中创建哈希码的答案 我正在编写新闻通讯工具 但不想被列入黑名单 好吧 谁想要 我已经检查过我的反向 DNS SPF 和 spamhaus org 有人可以帮助我如何在 PHP 中创建 hashcas
  • Qt 5.8 和 Pdf.js 错误

    我的 pdf js 和 Qt 5 8 有问题 我尝试在此链接中执行相同的代码在 Qt5 8 中使用 pdf js在我的应用程序中 但他不工作我不知道为什么 qt向我显示这条关于JS的消息 js 未捕获类型错误 无法读取未定义的属性 PDFJ
  • Angular:更新服务并在控制器之间共享数据

    我正在使用服务从 API 获取一些数据 angular module myApp factory myService function q timeout var getMessages function var deferred q de