2014-09-02 2 views
0

Мне интересно, как загрузить несколько файлов .json в шаблон. В моем примере у меня есть представления от пользователей, и я не хочу хранить все в одном 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(); 
} 

Помощь оценили

+0

у вас может быть еще один http-вызов. Вы этого не хотите? – V31

+0

Могли бы вы продемонстрировать это, пожалуйста? –

ответ

0

Вы можете запросить 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); 
    } 
    } 
}]); 

, где теперь вы можете включить эту фабрику в качестве зависимости и получить данные пользователя и назначить ее в функции обратного вызова.

+0

Привет, я должен что-то делать неправильно ... поскольку я не могу загрузить файл json ... Я также хочу продолжить существующий метод загрузки. Есть ли способ к чему-то подобному? Функция ContentCtrl ($ scope, $ http) { "use strict"; $ scope.content = []; $ scope.users = []; $ scope.fetchContent = function() { $ http.get ('content.json'). Then (function (result) { $ scope.content = result.data; }); $ http.get ('users.json'). Then (function (result) { $ scope.users = result.data; }); } $ scope.fetchContent(); } –

+0

да, это также возможно, но не думаете ли вы, что отдельные функции будут преимуществом для сохранения сегментации кода. – V31

+0

Я не уверен, какой метод будет работать лучше. Если использование отдельных функций более гибкое, я с удовольствием использую заводы. –

Смежные вопросы