ANGULAR: link function not being called on click in custom directive

Question

I'm in the middle of refactoring an old project to use custom directives, and I'm already running into a problem. I'm just trying to make a simple directive and build from there. I have a logger function in my directive's link function that just runs a console.log. I'm not sure what I'm missing here, and I'm sure it's something simple. Here's my directive:

'use strict';

(function() {
    angular
        .module('sigFig')
        .directive('myDirective', myDirective);

    function myDirective(sigFigFactory) {
        var directive = {
            restrict: 'E',
            replace: 'true',
            templateUrl: 'Directives/directiveTemplate.html',
            link: link,
            compile: compile
        };
        return directive;

        function link(scope, element, attrs) {
            scope.logger = function() {
                console.log('DING!!!');
            }
        }
        function compile(scope, element, attrs) {
            console.log('I AM A COMPILE FUNCTION');
        }
    }
})();

The HTML template for it is just:

<button ng-click="logger()">CLICK ME</button>

And I'm calling it in my HTML like this:

<my-directive></my-directive>

The button appears and that console.log in my compile works, but the ng-click does not. What is it I'm missing? Thanks in advance!

is it working with the solution?

I. Ahmed
– I. Ahmed

2018-02-23 02:07:41 +00:00
Commented Feb 23, 2018 at 2:07 — I. Ahmed
– I. Ahmed, Commented Feb 23, 2018 at 2:07

I. Ahmed · Accepted Answer · 2018-02-23 01:25:03Z

0

Add scope to directive variable: scope:{},

 function myDirective(sigFigFactory) {
        var directive = {
            scope:{},
            restrict: 'E',
            replace: 'true',
            templateUrl: 'Directives/directiveTemplate.html',
            link: link,
            compile: compile
        };
        return directive;

answered Feb 23, 2018 at 1:25

I. Ahmed

2,5261 gold badge14 silver badges30 bronze badges

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

Comments

lilo · Accepted Answer · 2018-02-23 03:53:38Z

I have never created an angular application without a controller. So I'm positive that that is your issue here.

Example of your code with a controller.

html:

  <body ng-app='sigFig' ng-controller='ctrl'>
    <my-directive></my-directive>
  </body>

js:

(function() {
        angular.module('sigFig', [])
        .controller('ctrl', function($scope){
            $scope.itemH = 'hahaha'
        })
        .directive('myDirective', myDirective);

        function myDirective() {
            return {
                restrict: 'E',

                template: '<button ng-click="logger()">{{item}}</button>',
                link: function link(scope, element, attrs) {
                    scope.item = "Logger Click Me";
                    scope.logger = function() {
                        alert('logger')
                    }
                }
            };

            function compile(scope, element, attrs) {
                console.log('I AM A COMPILE FUNCTION');
            }
        }
    })();

Collectives™ on Stack Overflow

ANGULAR: link function not being called on click in custom directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related