Question

我对这个AngularJS页面有点麻烦，它没有显示它应该的数据。

我刚刚开始使用角度，所以欢迎使用指针或建议。

这是Factory和Controller：

var app = angular.module('mpDataApp', [])
.controller('MpMapController', MpMapController)
.factory('GetMpData', GetMpData)

function GetMpData($http) {
    var data = [];
    return {
        getData: function () {
            return $http.get('MpWatch/GetMpData').success(function (data, status, header, config) {
            }).then(function (results) {
                data = ParseMpResults(results.data.d);
                return data;
            })
        },
    };
}

function MpMapController(GetMpData) {
    GetMpData.getData().then(function (data) {
        angular.extend(this, {
            mpData: data,
        });
    });
};

这是标记：

//ng-app declared higher in the markup    
<div>
        <div ng-controller="MpMapController as mp">
            <ul >
                <li>
                    Number of records: {{mp.mpData.length}}
                </li>
                <li ng-repeat="mps in mp.mpData" >
                    <p>{{mps.deviceId}}</p>
                </li>
            </ul>
        </div>
    </div>

问题是，在调试期间，可以看到“mpData”具有正确显示的数据。但页面没有显示它，也没有显示错误。在Visual Studio中，我可以将鼠标悬停在标记中的“mpData”上，并显示数据存在。

BasicConfigurator source

但它没有显示在页面上。提前感谢任何帮助，建议或指针。

彼得

更新

这就是诀窍，谢谢你的所有答案，它帮助我做到了。

function GetMpData($http) {
    return {
        getData: function () {
            return $http.get('/MpWatch/GetMpData')
                  .then(function (response) {
                      return {
                          data: ParseMpResults(response.data.d),
                      }
                  });
        },
    };
};

function MpMapController(GetMpData) {
    var mp = this;
    var self = this;
    GetMpData.getData().then(function (mpResults) {
        angular.extend(self, {
            mpData: mpResults.data,
        })
    });
};

现在页面上的数据显示正确。

Answer 1

尝试以下方法。我已经更改了您的服务以返回promise，因为您的语法错误。

您应该在控制器上使用ParseMpResults方法。

function GetMpData($http) {
    var data = [];
    return {
        getData: function () {
            return $http.get('MpWatch/GetMpData');
        },
    };
}

function MpMapController(GetMpData) {
    GetMpData.getData().then(function (results) {
        angular.extend(this, {
            mpData: ParseMpResults(results.data.d),
        });
    });
};

Answer 2

实际上问题是，当你的工厂调用时，它不会等到响应来然后分配给myData ，并且编译器继续执行以在那时移动视图变量myData将为空并且响应来自服务器后，您可以看到变量中的数据，但在视图加载时却没有。

因此，最佳做法是您必须在工厂或服务中定义承诺。

所以只需从工厂返回这样的http调用。

 return $http.get('MpWatch/GetMpData');

并利用promises等待响应来自服务器，您可以正确地在视图中弹出数据

Answer 3

＆＃13;

var app = angular.module('mpDataApp', [])
  .controller('MpMapController', MpMapController)
  .factory('GetMpData', GetMpData)

function GetMpData($http) {
  var data = [];
  return {
    getData: function() {
      return $http.get('MpWatch/GetMpData');
    },
  };
}

function MpMapController(GetMpData) {
  var mp = this;
  mp.mpData = [];
  GetMpData.getData().then(function(data) {
    mp.mpData = data

  });
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mpDataApp">
  <div ng-controller="MpMapController as mp">
    <ul>
      <li>
        Number of records: {{mp.mpData.length}}
      </li>
      <li ng-repeat="mps in mp.mpData">
        <p>{{mps.deviceId}}</p>
      </li>
    </ul>
  </div>
</div>

＆＃13;

AngularJS数据未显示在页面上

3 个答案: