Question

我正在构建一个快速的Angular应用程序，该应用程序使用服务从URL获取JSON。

JSON结构如下所示：

{news:[{title:"title",description:'decription'},
       {title:"title",description:'decription'},
       {title:"title",description:'decription'}
      ]};

我需要的只是新闻对象中的数组。

我导入JSON的代码如下：

app.factory('getNews', ['$http', function($http) { 
  return $http.get('URL') 
        .success(function(data) { 
          return data; 
        }) 
        .error(function(err) { 
          return err; 
        }); 
}]);

然后将数据添加到控制器中的$ scope对象，我这样做：

app.controller('MainController', ['$scope','getNews', function($scope, getNews) {
getNews.success(function(data)) {
    $scope.newsInfo = data.news;
    });

});

但它不起作用。当我加载html页面时，只有白色。我的想法是，这是因为它没有抓住JSON中的数组并使用该数据来填充我设置的HTML指令。

newsInfo.js：

app.directive('newsInfo',function(){
  return {
    restrict: 'E',
    scope: {
  info: '='
},
templateUrl:'newsInfo.html'
  };
    });

newsInfo.html：

<h2>{{ info.title }}</h2>
<p>{{ info.published }}</p>

我的HTML文档是：

<head>      
    <title></title>

    <!--src for AngularJS library--> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>

<body ng-app="THE APP NAME"> <!--insert ng app here-->
    <div ng-controller="MainController"> <!--insert ng controller here-->
        <div ng-repeat="news in newsInfo"><!--insert ng repeat here-->
            <!-- directive goes here-->
            <newsInfo info="news"></newsInfo>
        </div>
    </div>



    <!-- Modules -->
    <script src="app.js"></script>

    <!-- Controllers -->
    <script src="MainController.js"></script>

    <!-- Services -->
    <script src="getNews.js"></script>

    <!-- Directives -->
    <script src="newsInfo.js"></script>
</body>

思想？

Answer 1

您还没有指定控制器。

@-webkit-keyframes shake 
    0%
        transform: translateX(0)
    25%
        transform: translateX(-25px)
    50%
        transform: translateX(0)
    75%
        transform: translateX(25px)
    100%
        transform: translateX(0)

@keyframes shake 
    0%
        transform: translateX(0)
    25%
        transform: translateX(-25px)
    50%
        transform: translateX(0)
    75%
        transform: translateX(25px)
    100%
        transform: translateX(0)

@-webkit-keyframes bounce 
    0%
        transform: translateY(0)
    25%
        transform: translateY(-25px)
    50%
        transform: translateY(0)
    75%
        transform: translateY(25px)
    100%
        transform: translateY(0)

@keyframes bounce 
    0%
        transform: translateY(0)
    25%
        transform: translateY(-25px)
    50%
        transform: translateY(0)
    75%
        transform: translateY(25px)
    100%
        transform: translateY(0)

Answer 2

更改

<newsInfo info="news"></newsInfo>

到

<news-info info="news"></news-info>

示例：https://jsfiddle.net/bhv0zvhw/3/

Answer 3

$scope.getNews = function(){
    return $http.get('URL').success(function(data) { 
      return data.news; 
    })
};

^这只是改变它，以便成功函数只返回新闻！

Answer 4

在回答我自己的问题时，我应该指出每个人的答案都是正确的。代码有多个错误，但最终错误是通过执行以下操作修复的：

显然我必须将newsInfo.html doc上传到S3存储桶并将该URL用作“Cross origin requests are only supported for HTTP.”但是然后Angular使用错误"$sce:insecurl Processing of a Resource from Untrusted Source Blocked"阻止了该外部源。

因为html模板非常简单，所以我只是通过直接在.js指令中键入模板来解决这个问题，并且它有效！谢谢大家的帮助！

在导入的JSON对象中获取一个数组 - AngularJS

4 个答案: