将事件处理程序添加到 AngularJS 嵌入内容

Question

向嵌入内容添加事件处理程序的正确方法是什么？我不希望我的指令的使用者将他们自己的点击处理程序添加到文档中。该指令应该处理它。但我不确定如何正确地将处理程序添加到使用 ng-transclude 传递的内容。

~~Fiddle 周围：https://jsfiddle.net/hoe71p0e/12/~~（无法让 Angular.js 和 JSFiddle 工作；我的 link 函数未被调用）

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() 没有返回结果，即使检查员似乎认为克隆包含 "button".

Answer 1

我无法想象你甚至在这个指令中进行链接。在你 fiddle 中，你缺少一些基本要求，例如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 演示

将事件处理程序添加到 AngularJS 嵌入内容

Add event handlers to AngularJS transclusion content

html

javascript

angularjs

angularjs-directive

angularjs-ng-transclude