AngularJs Custom Directive scope data overwritten

Question

I have displayed the products based on branch and billing account. In the product template, i have a "+" button, if we click on the button, then i'm displaying the particular product id below that product template.

Now the problem is, when i click the "+" button of "Product 1" , then it display product id as "300152". its fine. After that If i click the "+" button next to "Product 2", its displaying product id as "300153" below both "Product 1" and "Product 2". This is the issue. Please check the following fiddle. Any help would be greatly appreciated.

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


            };
 }
    };
}]);

Kursad Gulseven · Accepted Answer · 2017-01-24 07:32:12Z

2

You are using two-way binding while adding new DOM child; and there is one "prdouctType" in the scope. So,

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

should be something like

var resp = "<p >ID : " + scope.prdouctType + "</P>";

answered Jan 24, 2017 at 7:32

Kursad Gulseven

2,0081 gold badge27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ananth Over a year ago

Its not possible. For testing, i used dummy content for var resp . But Actually, it will hold a jsp file content., var resp = code_to_readfile('productdetails.jsp');

Kursad Gulseven Over a year ago

Cloning the produced html (changing divId.innerHTML=resp; to divId.innerHTML=angular.copy(resp);) may help you.

Kursad Gulseven Over a year ago

You are still using two-way binding in resp. Set resp according to my answer. By the way, what is in "productdetails.jsp"?

Ananth Over a year ago

in productdetails.jsp, we have all details of product like id, subproducts, etc, This file have more then 100 lines of code. so its not good to keep it in js file.

Kursad Gulseven Over a year ago

I suggest you to use html templates for both directive template and "productdetail.jsp" replacement. Besides, it is not good practice to set innerHtml while using AngularJS; instead one should use html templates.

|

Johnny Ha · Accepted Answer · 2017-01-24 07:56:19Z

1

Here is the working JS Fiddle: http://jsfiddle.net/fokv7Lhh/38/

You can use one way binding

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

Do you really need to apply to the scope? Another way to show the value is something like this:

var resp = "<p >ID : " + productId + "</p>";

answered Jan 24, 2017 at 7:56

Johnny Ha

6335 silver badges21 bronze badges

Comments

rrd · Accepted Answer · 2017-01-24 07:20:39Z

0

Add in bindToController:

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

That should stop it happening.

answered Jan 24, 2017 at 7:20

rrd

5,9873 gold badges32 silver badges37 bronze badges

Comments

Sravan · Accepted Answer · 2017-01-24 07:58:27Z

Hello If you want to keep the {{prdouctType}} the same. You can try something like this.

You can hide the previous div and open the new one.

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>

You can run the above snippet

(OR)

HEre is a DEMO for it

As per my requirement, i should not remove that product type details until user click on the "-" symbol. so it wont work for that scenario.

Collectives™ on Stack Overflow

AngularJs Custom Directive scope data overwritten

4 Answers 4

6 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related