javascript - AngularJS 数据未显示在页面上

Question

这个 AngularJS 页面有点问题，它没有显示它应该显示的数据。

我最近才开始使用 Angular，因此欢迎指点或建议。

这是工厂和 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”上，它会显示数据存在。

但它没有显示在页面上。预先感谢您提供任何帮助、建议或指示。

彼得

更新:

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

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

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

  });
};

<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>