角度指令编译器发射ng单击两次

Question

我在我的模板中使用手风琴指令，而在手风琴内部，我在元素上添加attrng-click。当我点击那个元素时，它会发射两次。

小提琴：http://jsfiddle.net/Lvc0u55v/10071/

代码：

//accordion directive 
.directive('simpleAccordion', function($compile, $timeout) { 
    return { 
     restrict: 'AEC', 
     controller: function($scope) { 
      $scope.current = null; 
      $scope.height = []; 
      $scope.zero = { 
       height: 0 
      }; 
      $scope.toggle = function(i) { 
       $scope.current = $scope.current === i ? null : i; 
      }; 
     }, 
     link: function(scope, el, attrs) { 
      var itemSelector = '[item-selector]' || 'li', 
       titleSelector = '[title-selector]' || 'h2', 
       contentSelector = '[content-selector]' || 'div'; 
      $timeout(function(){ 
      var items = el[0].querySelectorAll(itemSelector); 
      for (var i in items) { 
       if (angular.isObject(items[i])) { 
       var title = items[i].querySelectorAll(titleSelector)[0]; 
       var content = items[i].querySelectorAll(contentSelector)[0]; 
       scope.height.push({ 
        'height': (content.offsetHeight + 10) + 'px' 
       }); 
       angular.element(items[i]).addClass('item').attr({ 
        'ng-class': '{\'open\':current == ' + i + '}' 
       }); 
       angular.element(title).addClass('title').attr('ng-click', 'toggle(' + i + ')'); 
       angular.element(content).addClass('content').attr({ 
        'ng-style': 'current == ' + i + '?height[' + i + ']:zero' 
       });; 

       } 
      } 
      $compile(angular.element(el).contents())(scope); 
      }); 
     } 
    } 
}) 

小提琴：http://jsfiddle.net/Lvc0u55v/10071/

Answer 1

默认情况下角器编译指令的所有内容，这样的话你调用链接功能编译，NG-点击会被编译两次。

为了防止这些行为，请保护您的html免受终端和优先级attrs编译的影响，并手动编译它，排除第三个参数（优先级）的指令。

改变指令定义：

{ 
.... 
terminal: true, 
priority: 1000 
... 
} 

并调用编译，如：$compile(el, null, 1000);