Привязка данных из запроса $http.get() в ng-repeat

Я получаю все мои данные JSON с сервера, но проблема возникает при попытке перечислить его на моей странице с помощью директивы ng-repeat.

Здесь содержимое моего тела HTML, где "mydata" (массив JSON) отображается правильно, как только метод $http.get() получает запрошенные данные, но ng- repeat не перечисляет элементы массива:

<body ng-app="myapp">
  <div ng-controller="MyController" >
    Data from server: {{ mydata }}          
  </div>

  <hr>

  <ul ng-controller="MyController as controller">
    <li ng-repeat="data in controller.mydata">
      {{ data }}
    </li>
 </ul>
</body>

И вот код Javascript:

var URI = 'http://my_service_uri/';

angular.module("myapp", [])
    .controller("MyController", function($scope, $http) {
        $scope.mydata = [];

        $http.get(URI)
            .then(function(result) {
                $scope.mydata = result.data;
             });
    });

Ответы

Ответ 1

Вы смешиваете контроллер как синтаксис и используете область. Посмотрите мой плункер на http://plnkr.co/qpcKJZx4jovC6YdzBd6J, и вы увидите пример.

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

app.controller('MyController', function($http) {
    var vm = this;
    vm.mydata = [];

    $http.get(URI)
        .then(function(result) {
          console.log(result);
          vm.mydata = result.data;
         });

Выберите один способ публикации ваших данных просмотра и придерживайтесь его, либо как контроллер, либо $scope.

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