Typeerror - Not a function in angular directive

Question

I have defined a custom click directive as below:

(function() {
    
    'use strict';
    angular.module('myApp.core')
        .directive('customClick', customClick);

        customClick.$inject = ['$rootScope'];

        function customClick() {
            return {
                restrict: 'A',
                /*scope: {
                    customClick: '&'  
                },*/
                link: function(scope, element, attrs){
                   $(element).on('click', function(e) {
                        scope.$apply(function() {
                            console.log("Hello..customClick..");
                            scope.customClick();
                        });
                    });
                }
          };
        }
})();

And I get the following error on this;

Error logged by WDPR Angular Error handler service {xx.."stacktrace":"TypeError: a.customClick is not a function","cause":"unknown cause"}(anonymous function)bowerComponents.js:5745

How can I resolve this? If I add scope with '&' I get demanding isolated scope. Hence how to resolve it?

If I remove - scope.customClick();, it does not show anything on second html for custom-click, it has impact on only 1 html, and its controller. I want to use it in multiple controller + html.

Naga Sandeep · Accepted Answer · 2016-02-24 06:26:09Z

1

customClick is a function on the directive itself. It is not a function on the scope. That's why the error has occurred.

link is used to manipulate dom/add event handlers on elements, which you have rightly done with element.bind('click', function() {

Whenever click occurs, the function binded to click automatically gets invoked. There is no need of watch and the invoking statement.

Your link can just be

link: function(scope, element){
        element.bind('click', function() {
                console.log("Hello..customClick..");
        });
    }

As you have used camel case in naming the directive, exercise caution in its usage in template.

You can use it as <p custom-click>hi</p>

answered Feb 24, 2016 at 6:26

Naga Sandeep

1,4312 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Smitha Over a year ago

should i be adding this - scope: { customClick: '&' } or not?

Naga Sandeep Over a year ago

You can add it. It is prominent when you are binding the value from your parent template to this directive. & is for one way binding. = is for two way binding. Here, it doesn't make any difference as we are not assigning any value to the directive.

Smitha Over a year ago

if i add it, I get - multiple directives [customClick, customClick] asking for new/isolated scope on:xxx template. So i removed it. But, problem now is - I see in console, "Hello custom click" twice for 1 single click!

Naga Sandeep Over a year ago

I am afraid I am not getting any such error. Fiddle here: jsfiddle.net/rn175w2y Please show any fiddle demo for further help. thanks

Smitha Over a year ago

just one question - is the error because i am trying to use it in multiple controller?

|

xSaber · Accepted Answer · 2016-02-24 15:17:28Z

0

I would recommend you to avoid using jQuery in angular apps. Try following

angular.module('newEngagementUI.core')
        .directive('customClick', customClick);

    customClick.$inject = ['$rootScope'];

    function customClick() {
        return {
            restrict: 'A',
            scope: {
                customClick: '&'  
            },
            link: function(scope, element, attrs){
               element.bind('click', function () {
                   scope.customClick();
               })
            }
      };
    }

In your template:

<div custom-click="clickFunction"></div>

And your template controller should be like:

angular.module('myApp', []).controller(['$scope', function ($scope) {

    $scope.clickFunction = function () {
        alert('function passed');
    }

}])

Working fiddle here: https://jsfiddle.net/xSaber/sbqavcnb/1/

edited Feb 24, 2016 at 15:17

answered Feb 24, 2016 at 6:19

xSaber

3841 silver badge11 bronze badges

3 Comments

Smitha Over a year ago

with this, i get the following error: multiple directives [customClick, customClick] asking for new/isolated scope on:xxx template

xSaber Over a year ago

@Smitha I have created it in a separate fiddle: jsfiddle.net/xSaber/sbqavcnb/1

Smitha Over a year ago

Thanks for the fiddle. But we should be destroying this timeout right? how do we do that?

Collectives™ on Stack Overflow

Typeerror - Not a function in angular directive

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related