Question

我使用的是Angular 1.6，但我无法在我的视图中显示数据。我知道我的控制器正在工作，因为当视图加载时，它会按照我在vm.getFeed（）中的要求将数据记录到控制台。

这是我的相关代码。

- routes.js -

myApp.config(function($routeProvider) {

  $routeProvider

  .when('/', {
    templateUrl: 'pages/home.html',
    controller: 'HomeController',
    controllerAs: 'vm'
  })

});

- controller.js -

(function() {
  'use strict';

  function HomeController($http, $resource) {

    var vm = this;

    vm.url = "https://www.reddit.com/r/pics/top/.json";

    vm.getFeed = function() {
      $http.get(vm.url)
        .then(function(response) {
          vm.feed = response.data.data.children;
          console.log(vm.feed);
        })
        .catch(function (err) {
          console.log('Error: ', err);
        });
    };

    vm.getFeed();

  }

  myApp.controller('HomeController', ['$http', '$resource', HomeController]);

}) ();

- index.html（正文标记内容） -

    Main

    <div class="container">
      <div ng-view></div>
    </div>

- 页/ home.html做为 -

Home

<div>
  <li ng-repeat="item in vm.feed">
    test
  </li>
</div>

Feed是一个25长的数组，所以它应该显示＆＃34; test＆＃34;在＆＃34; Main＆＃34;之后25次和＆＃34; Home＆＃34;。但是这里显示了所有内容：

Main
Home

但是数组会被记录到控制台，所以知道$ http工作正常并且vm.getFeed（）函数被点击了。

我错过了什么？

Answer 1

试试这个：

- controller.js -

(function() {
  'use strict';

  function HomeController($scope, $http, $resource) {

   var url = "https://www.reddit.com/r/pics/top/.json";

    $scope.getFeed = function() {
      $http.get(url)
        .then(function(response) {
          $scope.feed = response.data.data.children;
          console.log($scope.feed);
        })
        .catch(function (err) {
          console.log('Error: ', err);
        });
    };

    $scope.getFeed();

  }

  myApp.controller('HomeController', ['$scope', '$http', '$resource', HomeController]);

}) ();

- 页/ home.html做为 -

<div>
  <li ng-repeat="item in feed">
    test
  </li>
</div>

Angular 1 - 为什么我的模型数据出现在视图中？

1 个答案: