Question

我是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}}的任何产品页面值未显示时。

任何解决方案都会得到满足。

Answer 1

使用$rootScope代替$scope

<强> $ rootScope

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

Answer 2

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

Answer 3

您正在寻找的是一个角度提供程序，例如存储值的工厂，这将允许值在使用路径时在控制器周围传递值。

看看这个例子，虽然它没有使用路由，但是主体是相同的： 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”。

我应该如何将JSON中的数据转换为另一个角度js控制器？

3 个答案: