Javascript 我应该如何将数据从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 class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li class="active">{{eachproduct.link}}</li>
    </ol>
    <div class="col-md-4">
        <figure><img ng-src="{{ }}"></figure>
        <p>
            <a href="">Read More</a>
        </p>
    </div>
</div>

{{eachproduct.link}

问题是当我导航到任何产品页面时，{{eachproduct.link}的值都没有显示出来

---

任何解决方案都将得到认可。

看起来您正在寻找的是一个角度提供者，例如一个用于存储值的工厂，这将允许在使用路由时在控制器周围传递值

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];
    });
});

看看这个例子，虽然它不使用路由，但其原理是相同的：

有关提供商的更多信息，请查看此处：

您的示例的工作原理如下：

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”。

使用

$rootScope

而不是

$scope

$rootScope

$rootScope是最顶层的作用域。一个应用程序只能有一个$rootScope，它将在应用程序的所有组件之间共享。因此，它就像一个全局变量。所有其他$scope都是$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];
     });
   }]);

---

您在

中注释掉了ProductController。当（'/products'

时？如果我删除注释，则ProductController不工作：（你犯了什么错误getting@HieuLe我删除了已评论的部分现在productlist.html页面工作正常，但product.html页面仍然存在问题。我应该添加$rootScope吗？这是因为当您转到产品页面时，它不会运行productcontroller代码。它只会运行viewController“ReferenceError:$http未定义”和product.html仍然显示{{eachproduct.link}}，但在上面的示例中，我应该在哪里传递$rootScope？它是否类似于下面的内容？app.controller（'ProductController'，function（$scope，$http，$rootScope）{$http.get（'partials/productTable.json'）。success（function（response）{$scope.datap=response.lists；}）；}）.controller（$viewController'，function（$scope，$routeParams）{$rootScope.eachproduct=$scope.datap[$routeParams.prodID]；}）@VANKD是的，只是这样。创建服务将是better@PankajParkar您可以为我的代码提供任何示例吗？这对我来说有点陌生。对productFactory的每次调用都会继续调用代码来获取数据吗？还是只调用一次？例如，如果有一个ajax调用来获取数据，那么它会每一次调用一次吗是否将其注入控制器？否，调用只会发生一次，angular中提供程序的目的是允许您在整个应用程序中保持持久状态。因此，您对工厂所做的任何更改都意味着可以从使用它们的任何其他地方访问它们。只有在您更改t（手动或请求另一个ajax调用）。谢谢。这很有意义。@benfes我也将尝试使用factory provider进行学习。谢谢您的帮助。@benfes我应该如何更改我的视图？我使用了您的解决方案，但屏幕上没有显示任何内容。Console中也没有错误。