AngularJS 1.6.9 绑定到服务变量的控制器变量不改变

Question

我有 2 个组件都在访问服务。一个组件传递一个对象，另一个组件应该显示它或只是接收它。问题是在初始化过程完成后，显示组件中的变量没有改变。

我试过使用 $scope , $scope.$apply(), this.$onChanges 以及 $scope.$watch 来跟踪变量，但它始终保持不变。

显示组件中的此控制器在对象中提供来自输入字段的文本。

app.controller("Test2Controller", function ($log, TestService) {

    this.click = function () {
        let that = this;
        TestService.changeText({"text": that.text});
    }
});

这是服务，它获取对象并将其保存到 this.currentText.

app.service("TestService", function ($log) {

    this.currentText = {};

    this.changeText = function (obj) {
        this.currentText = obj;
        $log.debug(this.currentText);
    };

    this.getCurrentText = function () {
        return this.currentText;
    };

});

这是应该显示对象的控制器，但甚至无法更新 this.text 变量。

app.controller("TestController", function (TestService, $timeout, $log) {

    let that = this;

    this.$onInit = function () {
        this.text =  TestService.getCurrentText();
        //debugging
        this.update();
    };

    //debugging
    this.update = function() {
        $timeout(function () {
            $log.debug(that.text);
            that.update();
        }, 1000);
    }

    //debugging
    this.$onChanges = function (obj) {
        $log.debug(obj);
    }


});

我花了很多时间寻找答案，但大多数都与指令相关或在我的情况下不起作用，例如将对象放入另一个对象的一种解决方案。我想我可以使用 $broadcast 和 $on 但我听说要避免使用它。我使用的 angular 版本是：1.6.9

Answer 1

我发现你的方法有问题。您正在尝试共享一个对象的单一引用。您希望共享对象引用一次，并希望在任何使用它的地方反映它。但是根据 changeText 方法，您正在设置对 currentText 服务属性的新引用，这是错误的。

相反，我建议您始终只使用一个对象的单一引用，它将负责在多个控制器之间共享对象。

服务

app.service("TestService", function ($log) {
    var currentText = {}; // private variable
    // Passing text property explicitly, and changing that property only
    this.changeText = function (text) {
        currentText.text = text; // updating property, not changing reference of an object
        $log.debug(currentText);
    };
    this.getCurrentText = function () {
        return currentText;
    };
});

现在从 changeText 方法只传递需要更改为的 text，而不是新对象。

AngularJS 1.6.9 绑定到服务变量的控制器变量不改变

AngularJS 1.6.9 controller variable bound to service variable doesn't change

angularjs

angularjs-service

angularjs-controller

angularjs-components