Данные AngularJS не отображаются на странице

Question

У меня есть небольшая проблема с этой страницей AngularJS, она не отображает данные, которые она должна.

Я только недавно начал работать с угловым, поэтому указатель или совет приветствуются.

Вот завод, и контроллер:

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» в разметке, и он показывает, что данные присутствуют.

Тем не менее он не отображается на странице. Заранее благодарим за помощь, консультацию или указатель.

Питер

Update:

Вот что сделал трюк, спасибо за все ответы, это помогло мне получить это право.

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>

Answer 2

Попробуйте нижеследующий. Я изменил вашу службу, чтобы вернуть 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 3

Собственно проблема заключается в том, что, когда ваша фабрика называется, не дожидаясь ответа приходят, а затем назначить MyData, и компилятор продолжает свое выполнение, чтобы двигаться на виду в то время, когда переменная MyData будет пустым и после ответа от сервера вы можете видеть данные внутри этого переменных, но не тогда, когда его загружают.

Таким образом, наилучшей практикой является то, что вы должны определить обещания там, где есть завод или услуги.

так что просто верните http-вызов, как это, с завода.

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

и используют обещает дождаться ответа от сервера придет, и вы можете poppulate данные внутри просмотров правильно