如何以角度加载多个json文件

Question

我在想如何将多个.json文件加载到模板中。 在我的示例中，我有来自用户的提交内容，如果可能，我不想将所有内容都存储在一个json文件中。

如何从多个json文件中抓取一些数据？

这里是我的plunk example

我想加载users.json以及

var app = angular.module('myApp', []); 

app.directive('contentItem', function ($compile,$parse) { 

    templates = { 
     image: 'image.html', 
     event: 'event.html', 
     article: 'article.html', 
     ad: 'ad.html', 
     discount: 'discount.html', 
     video: 'video.html' 

    } 

    var linker = function(scope, element, attrs) { 
     scope.setUrl = function(){ 
      return templates[scope.content.content_type]; 
     } 

    } 

    return { 
     restrict: "E", 
     replace: true, 
     link: linker, 
     scope: { 
      content: '=' 
     }, 
     templateUrl: 'main.html' 
    }; 
}); 

function ContentCtrl($scope, $http) { 
    "use strict"; 

    $scope.url = 'content.json'; 
    $scope.content = []; 

    $scope.fetchContent = function() { 
     $http.get($scope.url).then(function(result){ 
      $scope.content = result.data; 
     }); 
    } 

    $scope.fetchContent(); 
} 

帮助表示赞赏

Answer 1

可以为JSON请求无论是从控制器，如：

app.controller('myController', function($scope, $http){ 
    $scope.users = []; 
    $scope.getUsers = function() {   
      $http({method: 'JSONP', url: "users.json?query=?callback=JSON_CALLBACK&query="+ $scope.searchString}). 
       success(function(data, status) { 
       $scope.users = data; 
       }). 
       error(function(data, status) { 
       console.log(data || "Request failed"); 
      });  
}; 

和另一种方法（更好的方法）是使用角度工厂来获取JSON文件。

myApp.factory('getUsersFactory',['$http',function($http){ 
    return { 
    getUsers: function(callback){ 
     $http({method: 'JSONP', url: "users.json?query=?callback=JSON_CALLBACK&query="+ $scope.searchString}).success(callback); 
    } 
    } 
}]); 

现在，您可以将此工厂作为依赖项包含，并获取用户数据并将其分配到回调函数中。