CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangularjs-ng-click
Smitha
Smitha

Reputation: 6134

Typeerror - Not a function in angular directive

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.

Upvotes: 1

Views: 4745

Answers (2)

xSaber
xSaber

Reputation: 384

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/

Upvotes: 0

Naga Sandeep
Naga Sandeep

Reputation: 1431

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>

Upvotes: 1

Related Questions