Question

我有一个包含不同产品的主页，我想在另一个视图中显示一个选择的产品。（详细视图）。要显示我使用ng-repeat的产品，它会迭代产品数组。

现在，当我点击按钮时，我从ng-repeat中获得了一个产品。然后使用选择的产品将视图更改为详细视图。视图的切换应该覆盖id，因为需要这个来向我的API发出请求。

在这种状态下，我尝试使用$ routeParams，但它没有工作。然后我在这里搜索stackoverflow。我读到它可能是范围问题，因为我试图将id传递给控制器。（我需要另一个控制器中的Id）。当我点击主页上的按钮时，没有任何事情发生。

我希望，有人有一个想法，如何解决这个问题。

以下是API的示例json文件：

 {
   "_id": "582ae2beda0fd7f858c109e7",
   "title": "Lorem ipsum",
    "smalldescription": "Lorem ipsum dolor sit amet,",
   "longdescription": "Lorem ipsum dolor sit ametLorem ipsum ",
   "price": "2500",
   "img": "Imagetxt"
 }

这是我的代码：

app.js

angular.module('Productportfolio', ['ngRoute'])

.config(['$routeProvider', function ($routeProvider) {

    $routeProvider
        .when('/home', {
            templateUrl: '/components/home/home.html',
            controller: 'ProductCtrl'
        })

        .when('/detail/:productId', {
            templateUrl: '/components/detail/detail.html',
            controller: 'DetailCtrl'

        .otherwise({redirectTo: '/home'});
}]);

home.html的

<div ng-controller="ProductCtrl as ProductCtrl">
    <div ng-repeat="product in ProductCtrl.products ">
        <h3>{{product.title}}</h3>
            <button ng-click="loadDetail(product)">Detailansicht</button>
        </div>
    </div>

ProductCtrl.js

 angular.module('Productportfolio')

.controller('ProductCtrl', ['APIService','$location', function (APIService,$location) {

    var vm = this;
    vm.products = null;

    init();

    function init() {
        APIService.getProducts()
            .then(function (response) {
               vm.products = response.data;
            })
            .catch(function (error) {
                console.log("error at GET");
            });
    }

    vm.loadDetail = function(product){
        $location.path('/detail'+product.id);
    }
}]);

APISvc.js

angular.module('Productportfolio')

.service('APIService', ['$http', function ($http) {

    var svc = this;
    svc.root = 'http://localhost:3000/api';

    svc.API = {
        'getProducts': getProducts,
        'getProduct' : getProduct
    };
    return svc.API;

    function getProducts() {
        return $http({
            method: 'GET',
            url: svc.root + '/products'
        })
    }

    function getProduct(id){
        return $http({
            method: 'GET',
            url : svc.root +'/product/'+id
        })
    }
}]);

DetailCtrl.js

 angular.module('Productportfolio')

.controller('DetailCtrl', ['APIService', '$routeParams', function (APIService, $routeParams) {


    var vm = this;
    vm.product = null;
    vm.productId = $routeParams.productId;

    init();

    function init() {
        APIService.getProduct(vm.productId)
            .then(function (response) {
                console.log(response);
                vm.product = response.data;
            })
            .catch(function (error) {
                console.log("error at GET");
            });
    }
}]);

Answer 1

从div中删除ng-controller并更新如下。

<div >
    <div ng-repeat="product in vm.products ">
        <h3>{{product.title}}</h3>
        <button ng-click="vm.loadDetail(product)">Detailansicht</button>
    </div>
</div>

同样在路线配置中添加控制器：＆＃39; vm＆＃39;

.when('/home', {
    templateUrl: '/components/home/home.html',
    controller: 'ProductCtrl',
    controllerAs: 'vm'
})

像

一样更新功能

vm.loadDetail = function(product){
    $location.path('/detail'+product['_id']);
}

Answer 2

用此

替换您的模块文件

angular.module('Productportfolio', ['ngRoute'])

.config(['$routeProvider', function ($routeProvider) {

    $routeProvider
        .when('/home', {
            templateUrl: '/components/home/home.html',
            controller: 'ProductCtrl',
            controllerAs: 'ProductCtrl'  //modified as your using controller as syntax
        })

        .when('/detail/:productId', {
            templateUrl: '/components/detail/detail.html',
            controller: 'DetailCtrl',
            controllerAs : 'DetailCtrl'     //modify this also              

            //add these lines
            param:{
            productId:null
            }
        }

        .otherwise({redirectTo: '/home'});
}]);

用此

替换您的ProductCtrl.js

angular.module('Productportfolio')

.controller('ProductCtrl', ['APIService','$location', function (APIService,$location) {

    var vm = this;
    vm.products = null;

    init();

    function init() {
        APIService.getProducts()
            .then(function (response) {
               vm.products = response.data;
            })
            .catch(function (error) {
                console.log("error at GET");
            });
    }

    vm.loadDetail = function(product){
        $location.path('/detail/'+product._id); // you missed a slash and the property was wrong
    }
}]);

这是正确的 $ location.path（ '/细节/' + product._id）;

Answer 3

修改正如@Paulson Peter所说：

从div中删除ng-controller并更新如下。

<div > <div ng-repeat="product in vm.products "> <h3>{{product.title}}</h3> <button ng-click="vm.loadDetail(product)">Detailansicht</button> </div>

同样在路由配置中添加controllerAs：'vm'

.when('/home', { templateUrl: '/components/home/home.html', controller: 'ProductCtrl', controllerAs: 'vm' })
像@ Aravind一样说：

vm.loadDetail = function(product){ $location.path('/detail/'+product._id); //here is the change }

现在我可以让产品获得视图更改

从ng-repeat中取出一个项目

3 个答案: