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

标签 javascript angularjs controller promise client-side

这是一段相对简单的代码,它调用服务并返回一些数据。我需要使用数据结果设置 $scope 。有没有一种简单的方法可以将此数据设置到作用域,而无需将作用域绑定(bind)到 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>

最佳答案

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

顺便说一句:您应该考虑对 http 请求使用 then() 而不是 success() 。代码看起来好多了,因为 then() 返回一个 promise :

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

success() 现已弃用。

关于javascript - 如何将结果添加到我的范围 ng-click?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34921214/

相关文章:

javascript - 单页上的多种类型的谷歌图表

javascript - 暂时禁用 CSS 过渡效果的最干净的方法是什么?

javascript - Firebase 中未找到 if 语句变量 == null?

javascript - 如何在 Electron 上使用预加载脚本?

javascript - Angular JS 在可编辑模式下添加新行

ruby-on-rails - 检查嵌套资源的当前父 Controller

c# - 如何解决单元测试项目 C# 中 HttpContext.Session(在 Controller 方法中)抛出的空引用异常?

javascript - 不能将自定义宽度与 Angular-Slick 一起使用

javascript - AngularJS:来自服务的数据未更新

php - Laravel 将数据传递给 Controller