Question

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

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

我也想加载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);
     }
   }
}]);

现在您可以将此工厂包含为依赖项并获取用户数据并在回调函数中指定它。

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

1 个答案: