如何将结果添加到我的范围 ng-click？

Question

这是一段相对简单的代码，用于调用服务和 returns 一些数据。我需要用数据结果设置 $scope。有没有一种简单的方法可以将此数据设置到作用域，而无需诉诸于将作用域绑定到 then 子句中的函数？

Angular代码

(function () {
    var app = angular.module('reports', []);
    var reportService = function($http, $q) {
        var service = {};
        service.getMenuData = function() {
            var deffered = $q.defer();
            $http.get('/Report/MenuData').success(function(data) {
                deffered.resolve(data);
            }).error(function(data) {
                deferred.reject("Error getting data");
            });
            return deffered.promise;
        }
        return service;
    };
    reportService.$inject = ['$http', '$q'];
    app.factory('reportService', reportService);

    var reportMenuController =
        function ($scope, $http, reportService) {
            $scope.getMenuData = function(e) {
                reportService.getMenuData().then(function(data) {
                    // Need to set the $scope in here
                    // However, the '$scope' is out of scope
                });
            }
        };
    reportMenuController.$inject = ['$scope', '$http', 'reportService'];
    app.controller('ReportMenuController', reportMenuController);
})();

标记

<div>
    <div ng-controller="ReportMenuController">
        <button ng-click="getMenuData()">Load Data</button>
    </div>
</div>

Answer 1

在传递给 then() 的函数中设置 $scope 绝对没有问题。该变量在封闭范围内可用，您可以将菜单数据设置为其字段之一。

顺便说一句： 您应该考虑使用 then() 而不是 success() 来进行您的 http 请求。代码看起来好多了，因为 then() returns 一个承诺：

service.getMenuData = function() {
    return $http.get('/Report/MenuData').then(function(response) {
        return response.data;
    }, function(response) {
        deferred.reject("Error getting data");
    });
}

success() 现在已弃用。

Answer 2

我没有注意到我的代码不同的 plunker 中缺少的小细节。

(function () {

...

    var reportMenuController =
        function ($scope, $http, reportService) {

        $scope.getMenuData = getMenuData;
        function getMenuData(e) {
                reportService.getMenuData().then(function(data) {
                    // Now I have access to $scope
                });
            }
        };
  ...
})();

注意以下两行的变化：

$scope.getMenuData = getMenuData;

函数 getMenuData(e) {

这也引出了一个小问题，“为什么可以在声明之前将 getMenuData 设置为 $scope？

如何将结果添加到我的范围 ng-click？

How do I add result to my scope ng-click?

javascript

controller

client-side

promise

angularjs