Как я могу получить данные от JSON в другой контроллер angular js?

Я новичок в AngularJS и придерживаюсь кода ниже.

app.config(function($routeProvider) {
 $routeProvider
 .when('/', {
 templateUrl: "partials/home.html",
 controller: "mainController",
 })
 .when('/products', {
 templateUrl: "partials/productlist.html",
 //controller: "ProductController",
 })
 .when('/product/:prodID', {
 templateUrl: "partials/product.html",
 controller: "viewController",
 })
 .when('/contact', {
 templateUrl: "partials/contact.html",
 controller: "contactController",
 })
 .otherwise({
 redirectTo: "/"
 });
});
app.controller('ProductController', function($scope, $http){
 $http.get('partials/productTable.json').success(function(response){
 $scope.datap = response.lists;
 });
 }).
controller('viewController',function($scope,$routeParams){
 $scope.eachproduct = $scope.datap[$routeParams.prodID];
});

И мой код страницы product.html будет выглядеть следующим образом.

<div ng-controller="viewController">
 <ol>
 <li><a href="#">Home</a></li>
 <li><a href="#">Products</a></li>
 <li>{{eachproduct.link}}</li>
 </ol>
 <div>
 
 <p>
 <a href="">Read More</a>
 </p>
 </div>
</div>

Проблема заключается в том, что я не просматриваю значение страницы продукта {{eachproduct.link}}.

Будет найдено любое решение.

3 ответа

Используйте $rootScope вместо $scope

$rootScope

$rootScope - самая верхняя область. Приложение может иметь только один $rootScope, который будет использоваться всеми компонентами приложения. Следовательно, он действует как глобальная переменная. Все остальные $scopes являются дочерними элементами $rootScope.

Пример:

controller('viewController',['$scope','$routeParams', '$http','$rootScope',function($scope,$routeParams, $http,$rootScope){
 $http.get('partials/productTable.json').success(function(response){
 $scope.datap = response.lists;
 $rootScope.eachproduct = $scope.datap[$routeParams.prodID];
 });
 }]);


Похоже, что вы ищете поставщика angular, такого как factory для хранения значений, это позволит значениям пропускать значения вокруг контроллеров при использовании маршрутов.

Взгляните на этот пример, в то время как он не использует маршруты, принцип тот же: https://jsbin.com/wiwejapiku/edit?html,js,output

Для получения дополнительной информации о провайдерах смотрите здесь: https://docs.angularjs.org/guide/providers

Ваш пример будет работать примерно так:

app
.factory('productFactory',function(){
 return {
 data: {}
 };
})
.controller('ProductController', function($scope, $http, productFactory){
 $scope.productFactory = productFactory;
 $http.get('partials/productTable.json').success(function(response){
 $scope.productFactory.data = response.lists;
 });
}).
controller('viewController',function($scope,$routeParams, productFactory){
 $scope.productFactory = productFactory;
 $scope.eachproduct = $scope.productFactory.data[$routeParams.prodID];
});

Обратите внимание, что вам также нужно будет изменить свое представление на ссылку 'productFactory.data' соответственно.


app.controller('ProductController', function($scope, $http){
 $http.get('partials/productTable.json').success(function(response){
 $scope.datap = response.lists;
 });
 }).
controller('viewController',function($scope,$routeParams, $http){
 $http.get('partials/productTable.json').success(function(response){
 $scope.datap = response.lists;
 $scope.eachproduct = $scope.datap[$routeParams.prodID];
 });
});

licensed under cc by-sa 3.0 with attribution.