0

Я использую аккордеонную директиву в своем шаблоне, а внутри аккордеона я добавляю attrng-click на элемент. Когда я нажимаю на этот элемент, он срабатывает дважды.Угловой директивный компилятор уволен ng-click дважды

Fiddle: 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); 
      }); 
     } 
    } 
}) 

Fiddle: http://jsfiddle.net/Lvc0u55v/10071/

ответ

0

По умолчанию углового компилирует все содержимое вашей директивы, так, то вы звоните компилировать в функции связи, нг-клик скомпилироваться дважды.

Чтобы предотвратить это поведение, предохраняйте ваш html от компиляции с помощью терминала и приоритета attrs и скомпилируйте его вручную, за исключением вашей директивы третьим аргументом (приоритетом).

изменить определение директиву:

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

и вызова компилировать как: $compile(el, null, 1000);

+3

Хотя этот код может ответить на вопрос, обеспечивая дополнительный контекст относительно того, почему и/или, как этот код отвечает на вопрос улучшает его длинный -термическое значение. – ryanyuyu

+0

- значение 'priority'' 1000' является обязательным, если нет, то на каких основах и сколько мы можем установить значение 'priority'. – Amit

+0

каждая директива имеет приоритет в угловом, по умолчанию 0, но некоторые встроенные директивы имеют разный приоритет. Угловое начало компиляции директивы от более высокого приоритета до нижнего. Ограничены ограничениями числа js. –

Смежные вопросы