J'ai affiché les produits en fonction de la succursale et du compte de facturation. Dans le modèle de produit, j'ai un bouton "+", si nous cliquons sur le bouton, j'affiche l'ID de produit particulier sous ce modèle de produit.

Maintenant, le problème est que lorsque je clique sur le bouton "+" de "Produit 1", l'ID du produit s'affiche sous la forme "300152". C'est bon. Après cela, si je clique sur le bouton «+» à côté de «Produit 2», il affiche l'identifiant du produit comme «300153» sous «Produit 1» et «Produit 2». Tel est le problème. Veuillez vérifier le violon suivant. Toute aide serait grandement appréciée.

JS Fiddle

TabsApp.directive('productTemplate', ['$compile', 
                                                 function($compile){
     return {
        restrict: "E",
        scope: {
      branchdata : '='
        },
    //templateUrl : templateSupportTabV3, 
  template: ' <li ng-repeat= "(prod_index, product) in branchdata.moduleLevel3List   "><span class="normal-negrita">{{product.name}} (ID.{{product.id}})</span><a class = "cursor" ng-click="load_productInfo_branch(  branch_index + 1 ,  prod_index + 1 ,  product.id  , branchdata.id );"><span id="more_product_body_{{branchdata.id}}_{{ product.id }}" class="normal" style="font-size:10px;"> &nbsp;+&nbsp;</span> </a><div id="product_body_{{branchdata.id}}_{{product.id}}" class="product_panel_container"></div></li> ',
        link: function (scope, elem, attrs) {

            scope.load_productInfo_branch = function(baIndex, productIndex, productId,branchId){ 
                 debugger;

                  scope.prdouctType = productId; 
                  var resp = "<p >ID : {{prdouctType}} </P>";
                  var divId = document.getElementById("product_body_" + branchId+"_"+productId);

                  divId.innerHTML=resp;
                  $compile(divId)(scope);


            };
 }
    };
}]); 
0
Ananth 24 janv. 2017 à 10:19

4 réponses

Meilleure réponse

Voici le JS Fiddle fonctionnel: http://jsfiddle.net/fokv7Lhh/38/

Vous pouvez utiliser la liaison à sens unique

var resp = "<p >ID : {{::prdouctType}} </p>";

Avez-vous vraiment besoin de vous inscrire au périmètre? Une autre façon d'afficher la valeur est quelque chose comme ceci:

var resp = "<p >ID : " + productId + "</p>";
1
Johnny Ha 24 janv. 2017 à 07:56

Vous utilisez une liaison bidirectionnelle lors de l'ajout d'un nouvel enfant DOM; et il y a un "prdouctType" dans la portée. Alors,

var resp = "<p >ID : {{prdouctType}} </P>";

Devrait être quelque chose comme

var resp = "<p >ID : " + scope.prdouctType + "</P>";
2
Kursad Gulseven 24 janv. 2017 à 07:32

Ajoutez bindToController:

bindToController: true,
scope: {
  branchData: '='
}

Cela devrait empêcher cela de se produire.

0
rrd 24 janv. 2017 à 07:20

Bonjour Si vous voulez garder le {{prdouctType}} le même. Vous pouvez essayer quelque chose comme ça.

Vous pouvez masquer le div précédent et ouvrir le nouveau.

var TabsApp = angular.module('TabsApp', []);

TabsApp.controller('IndexCtrl', function ($scope) {
	$scope.tabdata =[{"id":49844,"name":"Billing account 1","entityType":"BA","moduleLevel2List":[{"id":2239,"name":"branch 1","entityType":"BRANCH","moduleLevel3List":[{"id":300152,"name":"PRoduct 1","entityType":"PRODUCT"},{"id":300153,"name":"PRoduct 2","entityType":"PRODUCT"},{"id":300154,"name":"PRoduct 3","entityType":"PRODUCT"}]}]},{"id":49845,"name":"Billing account 2","entityType":"BA","moduleLevel2List":[{"id":2240,"name":"branch 2","entityType":"BRANCH","moduleLevel3List":[{"id":300127,"name":"PRoduct 4","entityType":"PRODUCT"}]}]}];
});

TabsApp.directive('supportTabV3Directive', ['$compile', 
                                                 function($compile){
	 return {
		restrict: "E",
		scope: {
			tabdata : '='
		},
	//templateUrl : templateSupportTabV3, 
  template: '<li name="billing_{{ ba_index + 1}}"  ng-repeat = "(ba_index, ba) in tabdata   "><span class="bold">{{ba.name}} (ID. {{ba.id}})</span><ul><li ng-repeat = "(branch_index, branch) in ba.moduleLevel2List   "><span class="normal">Nombre: {{branch.name}}</span><ul><product-template branchdata="branch" ></product-template></ul></li>',
		link: function (scope, elem, attrs) {
			
			
 }
	};
}]);



TabsApp.directive('productTemplate', ['$compile', 
                                                 function($compile){
	 return {
		restrict: "E",
		scope: {
      branchdata : '='
		},
	//templateUrl : templateSupportTabV3, 
  template: ' <li ng-repeat= "(prod_index, product) in branchdata.moduleLevel3List   "><span class="normal-negrita">{{product.name}} (ID.{{product.id}})</span><a class = "cursor" ng-click="load_productInfo_branch(  branch_index + 1 ,  prod_index + 1 ,  product.id  , branchdata.id );"><span>{{productType}} </span> <span id="more_product_body_{{branchdata.id}}_{{ product.id }}" class="normal" style="font-size:10px;"> &nbsp;+&nbsp;</span> </a><div id="product_body_{{branchdata.id}}_{{product.id}}" class="product_panel_container"></div></li>',
		link: function (scope, elem, attrs) {
			
			scope.load_productInfo_branch = function(baIndex, productIndex, productId,branchId){ 
			      
			      scope.prdouctType = productId; 
            if(document.querySelector('#test'))
            {
            document.querySelector('#test').remove()
            }
            
			      var resp = "<p id='test'>ID : {{prdouctType}} </P>";
			      var divId = document.getElementById("product_body_" + branchId+"_"+productId);
            console.log(divId);
			      divId.innerHTML=resp;
			      $compile(divId)(scope);
			      
            
			};
 }
	};
}]);
 
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js
"></script>
<body>

<div ng-app = "TabsApp">
	<div ng-controller="IndexCtrl">
  
  <support-tab-v3-directive tabdata="tabdata"></support-tab-v3-directive>
    </div>
</div>



</body>
</html>

Vous pouvez exécuter l'extrait de code ci-dessus

(OU)

HEre est une DEMO pour ça

0
Sravan 24 janv. 2017 à 07:58