Question

我在Ionic中使用角度UI路由器来构建应用程序，但是我的单页news.html没有加载内容。它显示了视图标题，但没有显示离子内容中的内容，页面为空白。此代码位于模板news.html

中

<ion-view view-title="news">
    <ion-content>
    <div class="list card" ng-repeat="item in articles">
      <div class="item item-thumbnail-left item-text-wrap">
        <h2 class="post-title">{{item.name}}</h2>
        <p class="post-author">{{item.description}}</p>
      </div>
    </div>
    </ion-content>
</ion-view>

在app.js中我添加了以下ui路由代码

.config(function($stateProvider, $urlRouterProvider) {
 $stateProvider
    .state('index', {
        url: '/',
        templateUrl: 'templates/home.html',
        controller: 'mainCtrl'
     })
    .state('news', {
         url: '/news',
         templateUrl: 'templates/news.html',
         controller: 'newsCtrl'
    });

$urlRouterProvider.otherwise('/');
})

我的newsCtrl是

.controller('newsCtrl',function($scope, $http){
    $http.get('https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest&apiKey=4ff16a30e00640cab0a2a9731ccc9510').success(function(data){
      $scope.articles = data.sources;
      console.log('news control');
    });

Answer 1

相同的代码工作

carService.controller('newsCtrl', ['$scope', '$http', function($scope, $http) {
  $http.get('https://newsapi.org/v1/sources?language=en').success(function(data) {
    $scope.articles = data.sources;
    console.log(data);
    console.log('news control');
  });

}]);

<强> DEMO

离子视图没有加载内容

1 个答案: