Question

我有一个js文件来使用web服务，这里我定义了一个我想在ng-repeat指令中使用的数组。这就是我现在所拥有的

HTML

<article ng-repeat="article in scopeArticles">
    <h1 class="content">content is {{article.title}} </h1>
    <img src="{{article.imgSource}}" href="{{article.source}}"/>
    <p>{{article.description}}</p>
</article>

js file

  var articles = [];

$(document).ready(function () {

    $.ajax({
        url: "https://newsapi.org/v1/articles?source=google-news&sortBy=top&apiKey=001034455"
    }).then(function (data) {
        $.each(data.articles, function (key, value) {
            articles.push({
                title: value.title,
                description: value.description,
                source: value.url,
                imgSource: value.urlToImage,
                date: value.publishedAt
            });

        })

    })

});

Answer 1

在使用AngularJS时尝试忘记jQuery。使用$http service获取您的数据。没有控制器你的HTML将无法正常工作。

请参阅下面的工作示例（不要忘记将API密钥添加到网址中）：

＆＃13;

angular.module('app',[])
.controller("Ctrl",function($scope, $http){
      var ctrl = this; 
      
      ctrl.articles = [];
      
      $http.get(
        'https://newsapi.org/v1/articles?source=google-news&sortBy=top&apiKey='
        )
      .then(function(response) {
            angular.forEach(response.data.articles, function(value){
                ctrl.articles.push({
                    title: value.title,
                    description: value.description,
                    source: value.url,
                    imgSource: value.urlToImage,
                    date: value.publishedAt
                });
            });
      });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<body ng-app="app" ng-controller="Ctrl as $ctrl">

<article ng-repeat="article in $ctrl.articles">
    <h1 class="content">content is {{article.title}} </h1>
    <img ng-src="{{article.imgSource}}" href="{{article.source}}"/>
    <p>{{article.description}}</p>
</article>

 
</body>

＆＃13;

使用不同文件中的angular指令访问js文件中定义的变量

1 个答案: