角度指令中事件参数的范围

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