角度指令中事件參數的範圍

Question

我有以下角度的應用程序來創建一個部分/產品的菜單。

當前呈現並點擊每個li中呈現的「添加」按鈕我想添加一個節/產品作爲該節的子集，但是會創建多個新的子節點。

最終我希望顯示一個表格，當提交時將創建孩子，但這是下一步。現在我需要將範圍限制在當前部分，而不是有多個綁定點擊。

如果您需要更多信息，請註明，我將在發佈後進行修改。

一些示例數據數據。

{ 
    "sections":[ 
     { 
      "name":"Flags", 
      "sections":[ 
       { 
        "name":"Europe", 
        "sections":[], 
        "products":[ 
         { "name": "France" }, 
         { "name": "Germany" }, 
         { "name": "Ireland" }, 
         { "name": "England" } 
        ] 
       }, 
       { 
        "name": "Africa", 
        "sections":[], 
        "products":[ 
         { "name": "Egypt" }, 
         { "name": "Nigeria" }, 
         { "name": "Chad" } 

        ] 
       }, 
       { 
        "name": "South America", 
        "sections":[], 
        "products": [ 
         { "name": "Brasil" }, 
         { "name": "Argentina" }, 
         { "name": "Peru" } 
        ] 
       } 
      ], 
      "products":[] 
     }, 
     { 
      "name": "Maps", 
      "sections":[ 
       { 
        "name": "Africa", 
        "sections":[], 
        "products":[ 
         { "name": "Egypt" }, 
         { "name": "Nigeria" }, 
         { "name": "Chad" } 

        ] 
       }, 
       { 
        "name": "South America", 
        "sections":[], 
        "products": [ 
         { "name": "Brasil" }, 
         { "name": "Argentina" }, 
         { "name": "Peru" } 
        ] 
       } 

      ], 
      "products":[] 
     }   
    ], 
    "products":[] 
} 

該應用程序。

'use strict'; 

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

menuApp 
    .directive('sections', function() { 
     return { 
      restrict: "E", 
      replace: true, 
      scope: { 
       sections: '=' 
      }, 
      template: '<ul><section ng-repeat="section in sections" section="section" /></ul>' 
     }; 
    }) 
    .directive('section', function ($compile) { 
     return { 
      restrict: "E", 
      replace: true, 
      scope: { 
       section: '=section' 
      }, 
      template: '<li class="section">{{section.name}} <button ng-click="addSub(section)">Add</button></li>', 
      link: function (scope, element, attrs, controller) { 
       if (angular.isArray(scope.section.sections)) { 
        element.append("<sections sections='section.sections'></sections>"); 
        $compile(element.contents())(scope); 
       } 
       if(angular.isArray(scope.section.products)){ 
        element.append("<products products='section.products'></products>"); 
        $compile(element.contents())(scope); 
       }; 
      }, 
      controller : function($scope){ 
       console.log($scope); 
       $scope.addSub = function (section){ 
        //console.log(section,'Adding Sub'); 
        section.sections.push({"name":"Section","sections":[],"products":[]}); 
       }; 
      } 
     }; 
    }) 
    .directive('products', function() { 
     return { 
      restrict: "E", 
      replace: true, 
      scope: { 
       products: '=' 
      }, 
      template: '<ul><product ng-repeat="product in products" product="product"></product></ul>' 
     }; 
    }) 
    .directive('product', function ($compile) { 
     return { 
      restrict: "E", 
      replace: true, 
      scope: { 
       product: '=' 
      }, 
      template: '<li class="product">{{product.name}}</li>' 
     }; 
    }); 

menuApp.controller('menuCtrl', function menuCtrl($scope,$http) { 
    $http.get('/ajax/getvenuesmenu?venueID='+venueMenu.venueId).success(function(resp) { 
     $scope.sections = resp; 
    }); 

    $scope.add = function(data){ 
     data.push({"name":"Section","sections":[]}); 
    }; 
}); 

Answer 1

我花了位的數字出來，但這裏的基本問題，正在編譯的section 2個額外的時間全部內容和每個編譯似乎添加一個新的事件處理程序。

每次創建新模板的附加內容時，不要編譯元素的內容，而要編譯模板本身（DOM外部），然後追加編譯的模板。這樣，ng-click處理程序不被編譯再次超過初始範圍創建其他

這裏的一個模板的縮寫版本附加：

link: function (scope, element, attrs, controller) { 
    if (angular.isArray(scope.section.sections)) { 
     /* compile outside of the DOM*/ 
     var subsections = $compile("<sections sections='section.sections'></sections>")(scope); 
     /* append compilation*/ 
     element.append(subsections);   
    } 

DEMO

另一種方法是在link中創建完整的模板字符串，方法是檢查小節和產品，然後一次編譯所有內容....而不是使用template選項

代碼替代方法編制完整的部分一次：

.directive('section', function ($compile, $timeout) { 
    return { 
     restrict: "E", 
     scope: { 
      section: '=section' 
     }, 
     link: function (scope, element, attrs, controller) { 
      var template = '<li class="section">{{section.name}} <button ng-click="addSub(section)">Add</button>'; 

      if (angular.isArray(scope.section.sections)) { 
       template += "<sections sections='section.sections'></sections>"; 
      } 
      if (angular.isArray(scope.section.products)) { 
       template += "<products products='section.products'></products>"; 
      }; 

      template += '</li>'; 

      var compiledTemplate = $compile(template)(scope); 
      element.replaceWith(compiledTemplate); 

      scope.addSub = function (section) { 
       section.sections.push({ "name": "Section", "sections": [], "products": [] 
       }); 
      };  
     } 
    }; 
}) 

DEMO-Alt