Question

我在关于指令的YouTube上关注

https://www.youtube.com/watch?v=0r5QvzjjKDc

非常好，imo。顺利完成直到最后（链接）。调试器告诉我

TypeError：element.click不是函数

我已经看过这七种方式到星期天了，我只是没有看到它与他所得到的不匹配。语法错误是否会突然出现？

感谢。

    angular
     .module('app.directives.contactCard', [])
     .directive('contactCard', function() {
return {
    /* choices are E-Element, A-Attribute, or C */
    restrict: 'E',
    scope: {
        friend: '=',
        title: '=',

    },
    replace: true,      
    transclude: true,
    templateUrl: "contactCard.html",
    link: function(scope, element, attrs) {
        element.click(function() {
            alert('click');
        });
    },
    controller: function($scope) {
        console.log($scope.friend);
    }
}
 })

Answer 1

这看起来很不错，只是element语法的一个小问题。该错误表明click()上没有此类功能（即element）。

尝试使用以下内容，该内容使用bind：

element.bind('click', function() {
   alert('click');
})

我在这里复制了你的指令：http://plnkr.co/edit/SX0zwYipydVvo6EMVfzE

Answer 2

总的来说，你正处于正确的轨道上，但像这样的假设点击功能更像是jQuery的做事方式，而不是Angular方式。通常情况下，如果您觉得自己试图通过JS操纵DOM的功能，那么您需要考虑使用jQuery而不是Angular。我意识到本教程使用了它，但它有点挫败了Angular的目的，我认为隐藏了很多它的真正力量。

单击函数的常见约定是将函数分配给指令控制器（或指令本身）中的$scope，然后在指令中使用ng-click引用它。＃39; s模板。

如果您可以更新您的问题以包含模板，我可以提供更具体的示例。我希望它会非常简洁。

指令中的语法

2 个答案: