Question

这是一段相对简单的代码，可以调用服务并返回一些数据。我需要使用数据结果设置$ scope。是否有一种简单的方法可以将此数据设置为范围，而无需将范围绑定到then子句中的函数？

角色代码

(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

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

顺便说一下：您应该考虑使用then()而不是success()作为您的http请求。代码看起来更好，因为then()返回一个承诺：

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？

2 个答案: