Question

我已根据分行和结算帐户显示了产品。在产品模板中，我有一个“+”按钮，如果我们点击按钮，那么我将在该产品模板下方显示特定的产品ID。

现在的问题是，当我点击“产品1”的“+”按钮时，它会将产品ID显示为“300152”。没关系。之后如果我点击“产品2”旁边的“+”按钮，它在“产品1”和“产品2”下面显示产品ID为“300153”。这是问题所在。请检查以下小提琴。任何帮助将不胜感激。

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


            };
 }
    };
}]);

Answer 1

您在添加新DOM子时使用双向绑定;并且范围中有一个“prdouctType”。所以，

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

应该是

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

Answer 2

这是工作中的JS小提琴：http://jsfiddle.net/fokv7Lhh/38/

您可以使用单向绑定

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

你真的需要申请范围吗？另一种显示价值的方法是：

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

Answer 3

添加bindToController：

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

这应该可以阻止它的发生。

Answer 4

你好如果你想让{{prdouctType}}保持不变。你可以尝试这样的事情。

您可以隐藏上一个div并打开新的div。

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>

您可以运行以上代码段

（OR）

HEre is a DEMO for it

AngularJs自定义指令范围数据被覆盖

4 个答案: