Angular $ scope数据不会更新

时间:2017-02-06 10:38:55

标签: angularjs node.js api express scope

我正在编写一个连接到第三方API的应用程序。

api使用auth令牌系统,所以我有一个异步节点js函数,它首先请求令牌,然后使用该令牌来检索一些数据。

问题在于,当数据更改时,angualr $ scope不会更新,因此即使在节点js api调用中抛出错误,页面也会显示相同的数据。

稍微浏览一下代码。

get-salesLead-data.js有一个Async瀑布函数,第一个使用http PUT调用第三方休息api并返回一个auth令牌。然后将此令牌传递到Async水的第二个函数,然后用于生成http GET请求以获取销售线索数据。

这是Node Async api调用。

    **get-saleLead-data.js** 

    // app/get-SalesLead-data.js
    // modules =================================================

    var http = require('http');
    var express = require('express')
    var async = require('async');

    module.exports = function(app) {


       Using async to preform async api calls and passing data between them

        async.waterfall([

            // First function is requesting the auth token

            requestToken = function(callback) {

                var options = {
                    "host": "********",
                    "path": '************'
                    "method": "PUT",
                    "headers": {
                        "Content-Type": "application/json",
                    }
                };

                var login = JSON.stringify({

                    "username": "********",

                    "password": "********",

                    "client_ip_address": "********"

                });

                var req = http.request(options, function(res) {
                    res.on('data', function(body) {
                        var body = JSON.parse(body);
                        var token = body.token;
                        console.log(token);
                        callback(null, token);
                    });
                });

                req.on('error', function(e) {
                    console.log('problem with request: ' + e.message);
                });

                req.write(login);
                req.end();
            },

            // Second function is using the auth token receieved from the first function to get sales lead dat
            getData = function(arg1, callback) {

                // Geting the sales id from the url and using it in the api request.
                app.get('/', function(req, res) {

                    app.set('salesLeadId', req.query.id);
                    var token = arg1;
                    var auth = 'Basic ' + new Buffer('********' + ':' + token).toString('base64');
                    var path = '****************' + app.get('salesLeadId');
                    var options = {
                        "host": "********",
                        "path": path,
                        "method": "GET",
                        "headers": {
                            "Content-Type": "application/json",
                            "Authorization": auth
                        }
                    };

                    var data = '';

                    // Assinging response data to to data
                    var req = http.request(options, function(res) {
                        res.on('data', function(chunk) {
                            data += chunk;
                        });

                        // Creating sales lead api so the front end can make requests
                        res.on('end', function(res) {
                            var body = JSON.parse(data);
                            console.log(body);
                            app.get('/api/salesLead', function(req, res) {
                                return res.json(body);
                                $scope.$apply();
                            });

                        })

                    });

                    req.on('error', function() {
                        alert('error');
                    });


                    res.sendFile('index.html', {
                        root: '../vpbx/public/views'
                    });

                    req.end();

                });

            }

        ], function(err, result) {

        });
    };

以下是访问/ api / salesLead的服务 创建一个使用http GET请求调用后端的函数。然后返回销售线索数据。

**salesLeadService.js**

    angular.module('SalesLeadService', []).service('SalesLeadService', function($http, $location, $rootScope) {

        var urlBase = '/api/salesLead'

        this.getSalesLead = function (data) {
            return $http.get(urlBase, data)
        };
    });
以下是优惠控制器。这会调用上面的服务并将数据分配给$scope.salesLead

**offer.js**

    // Form controller
    // =============================================================================
    angular.module('offerController', []).controller('offerController', function($scope, $http, SalesLeadService, $timeout) {

        // GETTING THE DATE-TIME STAMP
        $scope.getDate = new Date();
        $scope.date = Date();

        // CALLING THE FUNCTION FROM THE SALES LEAD SERVICE

        SalesLeadService.getSalesLead()
            .then(function(response) {
                    $scope.salesLead = response.data;
                    $scope.$applyAsync();
            });
    });

请注意我尝试使用$scope.$apply,但是他有运气。 任何帮助表示赞赏 感谢

2 个答案:

答案 0 :(得分:3)

  

尝试像这样的对象

$scope.object = {salesLead : ''};

$scope.object.salesLead = response.data;

<强> HTML

使用{{object.salesLead}}

  

我认为它适合你

<强> offer.js

angular.module('offerController', []).controller('offerController', function($scope, $http, SalesLeadService, $timeout) {

    // GETTING THE DATE-TIME STAMP
    $scope.getDate = new Date();
    $scope.date = Date();

    // CALLING THE FUNCTION FROM THE SALES LEAD SERVICE

     $scope.object = {salesLead:''};
    SalesLeadService.getSalesLead()
        .then(function(response) {
                $scope.object.salesLead = response.data;
                $scope.$applyAsync();
        });
});

答案 1 :(得分:0)

我发现这个问题与前端无关,而是我的后端。

问题是我有一个嵌套路线。

为了解决这个问题,我完全重写了我的路线。