angulaire.js - Angular implémente la capture de l'identifiant de l'élément sélectionné et la transmission de cet identifiant en tant que paramètre à la page sautée

Question

Utilisez ng-repeat dans la commande pour boucler et afficher la liste des produits

angular.module("goodsInsert",[])
    .directive("myDirective",function(){
        return{
            restrict:'EA',
            template:'<p class="goods_wrap"  ng-repeat="item in data" ng-click="toPage({{item.id}})">'
            +'<p class="goods_left"><img src="{{item.images}}" alt="" /></p>'
            +'<p class="goods_right">'
            +'<p class="goods_describe">{{item.name}}</p>'
            +'<p class="goods_info"><p>{{item.price | currency:"￥"}}</p><p>已售{{item.saleCount}}件</p></p>'
            +'<p class="user_wrap"><img src="{{item.producer.header}}" alt="" class="user"/><p class="grey">{{item.producer.lastname}}</p></p>'
            +'</p>'
            +'</p>'

        };
    });

Définissez les paramètres de saut dans le contrôleur, principal est la page d'affichage de la liste des produits, la conception est la page de détails du produit sélectionnée pour le saut

myApp.controller("mainCtrl", function($scope,$http,goodsService,$state) {
    var data=goodsService.getNewGoods();
    data.then(function(data){
        $scope.data=data.results;
        
    },function(data){
        $scope.error=data;
    });
    $scope.toPage=function(id){
        if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
    $scope.$apply();
}
        alert(111);
        $state.go('index.detail',{ID:$scope.data[0].id});
    }
});
myApp.controller('designCtrl',function($scope,$state,$stateParams){
    
    var receivedId = $stateParams.ID;
    alert(receivedId);
})

Il n'y a pas de saut pour le moment et l'événement click ne peut pas être déclenché. La modification du ng-click ajouté dans ng-repeat en toPage(id) peut sauter, mais les paramètres transmis à ce moment sont toujours codés en dur dans. le contrôleur. $scope.data[0].id, au lieu de cliquer sur le produit correspondant
Avez-vous des solutions ?

Answer 1

Trouvez la réponse ! !
ng-click=toPage(item.id)
Supprimez le {{}} dans les paramètres et laissez tout le reste tranquille, cela résoudra le problème

Answer 2

angular.module("goodsInsert",[])
    .directive("myDirective",function(){
        return{
            restrict:'EA',
            template:'<p class="goods_wrap"  ng-repeat="(item,key) in data" ng-click="toPage(key)">'
            +'<p class="goods_left"><img src="{{item.images}}" alt="" /></p>'
            +'<p class="goods_right">'
            +'<p class="goods_describe">{{item.name}}</p>'
            +'<p class="goods_info"><p>{{item.price | currency:"￥"}}</p><p>已售{{item.saleCount}}件</p></p>'
            +'<p class="user_wrap"><img src="{{item.producer.header}}" alt="" class="user"/><p class="grey">{{item.producer.lastname}}</p></p>'
            +'</p>'
            +'</p>'

        };
    });

$scope.toPage=function(key){
        if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
    $scope.$apply();
}
        alert(111);
        $state.go('index.detail',{ID:$scope.data[key].id});
    }

Answer 3

Euh. La méthode dans ng-click transmet les paramètres et ne nécessite pas {{}}