Question

如果有应用程序控制器。在这个控制器中，我调用一个名为＆＃34; saveGame＆＃34;的资源服务。 saveGame有一个名为＆＃34;已解决的属性＃34;。我使用 false 初始化此属性。当promise解决后（加载了保存游戏），我将已解析的属性设置为 true 。

以上部分有效。

现在我在我的MainCtrl中注入了saveGame服务。如果我在本地运行代码它可以工作，因为saveGame几乎立即解决。但是，如果我打开延迟 - 模仿一个非常慢的连接。 saveGame不会及时解决，我需要等待它。

这是我的代码：

application
    .controller('MainCtrl',
        ['$scope', 'saveGame', function ($scope, saveGame) {
            'use strict';

            // At this point the savegame should be resolved
            // If not we need to wait for it.
            $scope.$watch(saveGame.resolved, function ( newVal, oldVal) {
                console.log( newVal + '-' + oldVal ); // #1
                if(newVal !== undefined ){
                    //do your stuff here...
                    console.log("do your stuff"); // #2
                }
            });

所以＃1中的 newVal ， oldVal 都是未定义的。＃2的控制台日志永远不会触发。

为了完整起见，我的saveGame服务如下所示：

application
    .factory('saveGame',
        ['$resource', 'config', function ($resource, config) {
            'use strict';

            var _resolved = false;
            var _location = {};

            var _load = function (playerId) {
                var res;
                if (config.getSetting('use-mockup')) {
                    // Use mockup data
                    // $resource returns a class representation
                    res = $resource('data/mockup/savegame/player:id.json');
                } else {
                    // TODO: Use real API
                }
                // This will return a promise!
                return res.get({id: playerId}).$promise;
            };

            var _save = function (stuff) {
                return stuff;
            };

            return {
                load: _load,
                save: _save,
                location: _location,
                resolved: _resolved
            };
        }]);

我的appCtrl中的部分是这样的：

// Load the savegame resource
            var promise = saveGame.load(1); // PlayerId
            promise.then(function (resource) {
                // savegame resource was loaded and resolved
                saveGame.location = resource.location;
                saveGame.resolved = true;
            });

所以我知道我做错了什么，但我无法弄明白什么？同样的帮助将非常感激。

Answer 1

你需要这个：

        $scope.$watch(function () { return saveGame.resolved; }, function ( newVal, oldVal) {
            console.log( newVal + '-' + oldVal ); // #1
            if(newVal !== undefined ){
                //do your stuff here...
                console.log("do your stuff"); // #2
            }
        });

您必须使用string作为watch或具有返回值的函数的第一个参数。如果使用字符串'a.b.c'，AngularJS比较将在当前和下一个周期中比较$scope.a.b.c。如果你在那里使用函数，AngularJS将比较函数的结果。

这里可能更好的方法是更新saveGame服务并在其中返回承诺。无论你需要saveGame的结果，你都会使用它：

module.factory('saveService', ['$http', function ($http) {
    return {
        doSave: function () {
            return $http.get(params);
        }
    }
}])

module.controller('MainCtrl', ['saveService', function (saveService) {
    saveService.doSave().then(function onSuccess() {
        // handle something after save
    });
}])

无法弄清楚如何使用$ scope。$ watch

1 个答案: