Angular 服务不在两个控制器之间存储数据

Question

我正在尝试使用服务在 controller1 中设置 title，然后在 controller2 中访问 title。

sharedProperties.setTitle(title) 在 controller1 中工作，但是当我尝试在 controller2 中获取标题时，它得到 "title" （初始值）而不是新值。

我也尝试过将 title 存储在 object 中，但没有成功。

app.service('sharedProperties', function () {
    var title = "title"

    return {
        getTitle: function () {
            return title;
        },
        setTitle: function (val) {
            title = val;
        }
    }
});

app.controller('controller1', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {

    $('body').on("click", "button[name=btnListItem]", function () {
        // gets the title
        var title = $(this).text();
        // sets the title for storage in a service
        sharedProperties.setTitle(title);
    });

}]);

app.controller('controller2', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {

    $scope.sharedTitle = function() { 
            return sharedProperties.getTitle(); 
    }; 

}]);

在我看来，我有 {{ sharedTitle() }}，据我所知，应该用新标题更新标题文本。

此外，如果这是相关的：两个控制器链接到两个不同的 html 页面。

我做错了什么？

编辑更新的按钮侦听器：

$('body').on("click", "button[name=btnListItem]", function () {
    // gets the text of the button (title)
    var title = $(this).text();

    sharedTitle(title);
    alert(sharedProperties.getTitle());
    document.location.href = '/nextscreen.html';
});

$scope.sharedTitle = function (title) {
    sharedProperties.setTitle(title);
};

Answer 1

你必须打印 console.log(sharedProperties.getTitle()); 不需要来自控制器的 return。

所以你的控制器2的代码是$scope.sharedTitle = sharedProperties.getTitle();

Answer 2

您的示例代码似乎是正确的。我设置了 jsfiddle，它似乎工作正常。找出我的 jsfiddle 和你的实际代码之间的区别将帮助你找到你应该解决的问题。

Javascript:

angular.module('testapp', [])
.service('sharedProperties', function(){
    var title = 'title';
    return {
        getTitle: function(){
            return title;
        },
        setTitle: function(val){
            title = val;
        }
    };
})
.controller('controller1', function($scope, sharedProperties){
    $scope.change_title = function(newvalue){
        sharedProperties.setTitle(newvalue);
    };
})
.controller('controller2', function($scope, sharedProperties){
    $scope.sharedTitle = function(){
        return sharedProperties.getTitle();
    };
})

Html:

<div ng-app="testapp">
    <div ng-controller="controller1">
        <input ng-model="newvalue">
        <button ng-click="change_title(newvalue)">Change Title</button>
    </div>
    <div ng-controller="controller2">
        <span>{{sharedTitle()}}</span>
    </div>
</div>

My jsfiddle is here.

Answer 3

您需要使用 $apply 以便 angular 可以处理在 angular 上下文之外所做的更改（在本例中是由 jQuery 所做的更改）。

$('body').on("click", "button[name=btnListItem]", function () {
    // gets the title
    var title = $(this).text();
    // sets the title for storage in a service
    $scope.$apply(function() {
      sharedProperties.setTitle(title);
    });

});

见plunker

也就是说，这是 错误做法，因为您违背了 angular 的本意。检查 “Thinking in AngularJS” if I have a jQuery background?。在某些情况下，您需要使用 $apply，例如在集成第三方插件时，但这不是其中一种情况。

Angular 服务不在两个控制器之间存储数据

Angular service not storing data between two controllers

html

angularjs

angularjs-scope

angular-services