Question

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

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

我也尝试在对象中存储title，但它不起作用。

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

您的示例代码似乎是正确的。我设置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 2

你必须打印console.log(sharedProperties.getTitle());不需要从控制器返回。

所以你的controller2代码是$scope.sharedTitle = sharedProperties.getTitle();

Answer 3

您需要使用$apply，以便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

那就是说，这是 BAD PRACTICE 因为你正在反对角度的意思。检查“Thinking in AngularJS” if I have a jQuery background?。在某些情况下，您需要在集成第三方插件时使用$apply，但这不是其中之一。

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

3 个答案: