Угловой компилятор директив дважды сработал

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

По умолчанию angular компилирует все содержимое вашей директивы, поэтому затем вы вызываете compile в функции link, ng-click будет скомпилирован дважды.

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

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

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

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