如何将结果添加到我的示波器 ng-click?

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

提问人:jwize 提问时间:1/21/2016 更新时间:1/22/2016 访问量:46

问:

这是一段相对简单的代码,用于调用服务并返回一些数据。我需要使用数据结果设置$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>
JavaScript AngularJS 控制器 Promise 客户端

评论

1赞 boyomarinov 1/21/2016
$scope应该被定义。下面是一个带有您示例的 plunker:plnkr.co/edit/2Ozy4YmjtVEXYXzKtRQk?p=preview
1赞 Benjamin Gruenbaum 1/21/2016
stackoverflow.com/questions/23803743/......
0赞 jwize 1/22/2016
好吧,我没有看到 Plunker 中的小细节。
0赞 jwize 1/22/2016
@Benjamin格伦鲍姆。我绝对想避免反模式。我不清楚如何做到这一点。我会花更多的时间在那篇文章上,但它似乎是从给定的帖子中分配的,因为我是这个领域的新手。
0赞 lex82 1/22/2016
@jwize,看看我的答案。我向你展示如何避免明确的承诺构建。

答:

1赞 lex82 1/22/2016 #1

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

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

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

success()现已弃用。

评论

0赞 jwize 1/23/2016
这并不能解决问题,但是一种改进代码的方法。博约马里诺夫帖子中的功能吊装是缺失的部分。你提到了其有效性的原因(吊装)。
0赞 jwize 1/22/2016 #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?

评论

0赞 lex82 1/22/2016
这称为“提升”: w3schools.com/js/js_hoisting.asp 它也适用于函数声明。
0赞 lex82 1/22/2016
我有没有回答你的主要问题,或者有什么不清楚的地方?顺便说一句,你宁愿把这个“答案”作为另一个问题发布。它没有回答您最初的问题,而是一个完全不同的问题。
0赞 jwize 1/23/2016
阅读后,似乎 $scope.getMenuData 应该 = 未定义。我会再读一遍。我读了 adripofjavascript.com/blog/drips/variable-and-function-hoisting,这对功能提升很清楚。