javascript - 不能在 ng-click 函数中使用 .then()

Question

我的 Controller 看起来像这样

function menuController($scope, dataService) {

    $scope.getMenuItem = '';      
    $scope.submenu = new Array();

    var setMenuItems = function (w) {
        $scope.submenu = new Array();
        $.each(w, function (i, val) {

            if ($scope.getMenuItem == 'year') {
                $scope.submenu.push( {
                    name: val[0].year, link: year

                });
            }

        });
    }
    $scope.UpdateSubmenu = function (a) {
        $scope.getMenuItem = a;

        loadData();
    };
    var loadData = function () {
        dataService.getAlbums().then(setMenuItems);
    }
    loadData();

}

在初始化期间调用 loadData() 时，它工作正常。但是，当从 UpdateSubmenu 调用它时，它会失败并显示 TypeError: dataService.getAlbums(...).then is not a function

UpdateSubmenu 函数由 ng-click 事件激活。

数据服务看起来像这样

(function () {
    "use strict";
    var dataService = function ($http) {
        var albums;

    var getAlbums = function () {
        if (albums)
            return albums;
        return $http.get("./api/Album").then(function (response) { albums = response.data; return albums; });
    }

    return { getAlbums: getAlbums };


}
angular.module("Main").factory("dataService", dataService);
}());

为什么我不能使用 then() not accepted?

Answer 1

问题是因为您正在缓存相册并返回它(如果存在)。第一次调用 getAlbums() 返回 $http promise，第二次返回一个专辑数组，没有 then() 方法。

我通常通过使用 $q 创建一个 promise 并立即解决它来处理这个问题:

(function () {
    "use strict";
    var dataService = function ($http, $q) {
        var albums;

        var getAlbums = function () {

            if (albums) {
                var deferred = $q.defer();
                deferred.resolve(albums);
                return deferred.promise;
                // ... or more simply ...
                //return $q.when(albums);
            }
            else {
                return $http.get("./api/Album")
                    .then(function (response) { albums = response.data; return albums; });
            }
        }

        return { getAlbums: getAlbums };    
    }

    angular.module("Main").factory("dataService", dataService);
}());