Добавить обработчики событий в контент застройки AngularJS

Question

Каков правильный способ добавления обработчиков событий для переноса содержимого? Я не хочу, чтобы потребители моей директивы добавляли свои собственные обработчики кликов в документ. Директива должна справиться с этим. Но я не уверен, как правильно добавить обработчиков в контент, переданный с помощью ng-transclude.

Fiddle вокруг: https://jsfiddle.net/hoe71p0e/12/ (не может получить Angular.js и JSFiddle работать, моя функция ссылка не вызывается)

foo.html

<my-foo> 
    <button type="button">Foo</button> 
</my-foo> 

Foo .js

return { 
    template: "<div class='my-foo' data-ng-transclude></div>" 
    link: function($scope, $elem, $attrs, $ctrl, $transclude) { 
     $scope.foo = function() { 
      console.log("this is never called"); 
     }; 

     $transclude(function(clone) { 
      for (var i in clone) { 
       if (clone[i].localName === "button") { 
        angular.element(clone[i]).attr("data-ng-click", "foo()"); 
       } 
      } 
     }); 
    } 
}; 

ожидается результат (кнопка, нажав должен вызвать Foo)

<div class="my-foo"> 
    <button type="button" data-ng-click="foo()">Foo</button> 
</div> 

фактический результат (кнопка, нажав ничего не делает)

<div class="my-foo"> 
    <button type="button">Foo</button> 
</div> 

Обратите внимание, атрибут на кнопку data-ng-click отсутствует.

Кроме того, я видел несколько примеров, с чем-то вроде этого ...

broken.js

$transclude(function(clone) { 
    angular.element(clone).find("button"); 
}); 

... но не потому, что те, .find() не возвращается с результатами, хотя инспектор, похоже, думает, что клон содержит «кнопку».

Answer 1

Я не могу себе представить, что вы даже связываетесь в этой директиве. В вашей игре вам не хватает нескольких базовых требований, например. ng-app="", restrict: 'E' (требуется для 1.2.x) в директиве стилей элемента и transclude: true. С исправлением тех, мы получаем рабочий пример. Кроме того, я не уверен, что вы пытаетесь сделать с $transclude(function(clone) { /*...*/, но я подозреваю, что это не нужно. Обратите внимание на следующее ...

<my-foo> 
    <button type="button" ng-click="foo()">Foo</button> 
</my-foo> 

---

.directive('myFoo', function() { 
    return { 
     transclude: true, 
     restrict: 'E', 
     template: '<div class="my-foo" ng-transclude></div>', 
     link: function($scope, elem, attrs) { 
      $scope.foo = function() { 
       console.log('this is called!'); 
      }; 
     } 
    }; 
}); 

JSFiddle Link - рабочая демо

---

За разговор самый прямой подход вы можете предпринять, чтобы решить эту проблему будет усиливая $compile обслуживание и изменение атрибута на ваш <button> (один раз выбранный) элемент в вашей директиве link. Вводят $compile и соблюдать следующие ...

.directive('myFoo', function($compile) { 
    return { 
     transclude: true, 
     restrict: 'E', 
     template: '<div class="my-foo" ng-transclude></div>', 
     link: function($scope, elem, attrs) { 

      $scope.foo = function() { 
       console.log('called') 
      } 

      var button = elem.find('button'); 
      button.attr('ng-click', 'foo()'); 
      $compile(button)($scope); 
     } 
    }; 
}); 

JSFiddle Link - $compile демо