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

Question

我已经展示了基于分行和账单账户的产品。在产品模板中，我有一个“+”按钮，如果我们单击该按钮，那么我会在该产品模板下方显示特定的产品 ID。

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

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

在bindToController中添加：

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

这应该会阻止它发生。

Answer 2

您在添加新的 DOM child 时正在使用 two-way 绑定；范围内有一个 "prdouctType"。所以，

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

应该是这样的

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

Answer 3

这是工作 JS Fiddle：http://jsfiddle.net/fokv7Lhh/38/

您可以使用一种绑定方式

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

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

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

Answer 4

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

您可以隐藏以前的 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>

您可以运行上述代码段

（或）

HEre is a DEMO for it

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

AngularJs Custom Directive scope data overwritten

angularjs

angularjs-directive

angularjs-scope

angularjs-compile