CODEWITHSUNDEEP
angularjs
ebick
ebick

Reputation: 79

Syntax In Directive

I followed this YouTube on Directives

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

and it was very good, imo. Got through following along successfully right up until the very end (link). The debugger is telling me

TypeError: element.click is not a function

I've looked at this seven ways to Sunday and I'm just not seeing where it's not matching what he's got. Is the syntax error jumping out at you?

Thanks.

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

Upvotes: 4

Views: 464

Answers (2)

Harris
Harris

Reputation: 1785

Overall you're on the right track, but the hypothetical click function like that is more reminiscent of the jQuery way of doing things than the Angular way. Typically, if it feels like you're trying to manipulate the features of the DOM through JS, you're thinking in jQuery instead of Angular. I realize that the tutorial utilized it, but it somewhat defeats the purpose of Angular, and I think hides a lot of its real power.

Common conventions for click-functions would be to assign a function to $scope in the directive's controller (or to the directive itself), then refer to it with ng-click in the directive's template.

If you can update your question to include the template, I can give a more specific example. I expect it'll be extremely succinct.

Upvotes: 0

lux
lux

Reputation: 8436

This looks pretty good, just a slight problem with the element syntax. The error is indicating there is no such function (i.e. click()) on element.

Try using the following, which uses bind:

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

I replicated your directive here: http://plnkr.co/edit/SX0zwYipydVvo6EMVfzE

Upvotes: 3

Related Questions