Angularjs - 工厂服务无法访问 $scope 对象答案

【问题标题】：Angularjs - Factory service not able to access $scope objectsAngularjs - 工厂服务无法访问 $scope 对象
【发布时间】：2014-12-18 08:57:33
【问题描述】：

基于在How to call custom Javascript functions from an AngularJS controller? 提出的问题的最佳答案。

我尝试了以下代码：

<body ng-app="FDAApp" ng-controller="formController">
<form ng-submit="login()">
    <input type="submit" ng-click="ngSubmit()">
</form>
<script type="text/javascript" >
    var app = angular.module('FDAApp', []);
    angular.module('FDAApp').factory('MyService', function($http) {
        var sessionKey='';
        return {
            sessionKey: sessionKey,
            login: function()
            {
                sessionKey="ABCD";
            }
        }
    });

    app.controller('formController', function ($scope, $http, $templateCache, $interval, $timeout, MyService) {

        $scope.sessionKey = '';
        $scope.sessionKey = MyService.sessionKey;

        $scope.login = function () {
            MyService.login();
            console.log($scope.sessionKey);
        }
    });
</script>
</body>

问题：我无法更新 $scope.sessionKey 的值。有什么帮助吗？

【问题讨论】：

不是 100% 确定你在问什么.. 但是在你调用 MyService.login() 之后你需要再次调用 $scope.sessionKey = Myservice.sessionKey 否则你的值不会更新范围。
您的代码存在与 JavaScript 语法相关的问题，而不是 AngularJS。在 JavaScript 中，字符串是“原始值”，而不是引用。因此，您的 MyService.sessionKey 将保持等于 '' 并且稍后更改局部变量 sessionKey 的值不会更改其值。

标签： javascript angularjs factory

【解决方案1】：

只需颠倒您的设计：服务不应更改任何$scope。

相反，让服务更改自己的数据并公开对象引用：

angular.module('FDAApp').factory('MyService', function($http) {
    var session = {
        key: ''
    };

    return {
        session: session,
        login: function()
        {
            session.key = "ABCD";
        }
    }
});

app.controller('formController', function ($scope, $http, $templateCache, $interval, $timeout, MyService) {

    $scope.session = MyService.session;

    $scope.login = function () {
        MyService.login();
        console.log($scope.session.key);
    }
});

【讨论】：

【解决方案2】：

当您更改原语而不是对象中的属性时，$scope.sessionKey 将保留旧会话密钥，而新会话密钥是不被跟踪的新实体。如果您想以这种方式传播更改，则需要不同的策略。

您可以将 $scope 传递给 MyService 以从服务中更改它，或者将 MyService 直接传递到范围中。

在范围内传递 MyService：http://jsfiddle.net/3mrwLt65/

$scope.MyService = MyService

MyService.login()

// now $scope.MyService.sessionKey is your session key.

将$scope 传递给 MyService：

在控制器中：

MyService.login($scope);

在服务中，登录功能如下：

function(scope) {
   scope.sessionKey = <your session key>
}

您可能还想使用this.sessionKey = 'ABCD' 而不是sessionKey = 'ABCD'

【讨论】：