ng-click in directive not calling function defined in controller scope

Question

Everything seems to render properly but my ng-click="check($event)" is not firing when I click on one of the four buttons. I even added an alert to the check($event) function but it's not coming up. Heres the codepen http://codepen.io/theMugician/pen/MKOzzV?editors=101

simonApp.directive('pads', ['lightIt', 'soundIt', function(lightIt,soundIt) {
    var template = '';
  template += '<button ng-click="check($event)" id=' + '{{index}} ' + 'class="pad pad-' + '{{color}}' + '">';
  template += '<div class="ripple js-ripple">';
  template += '<span class="ripple-circle ' + 'ripple-' + '{{color}}' + '"></span></div>';
  template += '</button>';
  return {
    restrict: 'E',
    replace: true,
    scope: {
      color: '@color',
      index: '@index'
    },
    link: function(scope, element, attrs) {
      scope.createRipple = function(e){
        lightIt.createRipple(e, this);
      } 
      //scope.$emit('index', scope.index);
      /*
      var index = parseInt(scope.index);
      scope.playSound = function() {
        soundIt(1);
      }*/
      console.log("scope.index: " + scope.index);
      //console.log("scope.playSound: " + scope.playSound);

      element.on('click', scope.createRipple);
      //element.on('animationend', scope.endRipple);
    },
    template: template
  };
  }]);

Here is the check() function in the controller

  $scope.check = function(e) {
    alert("check works");
    var id = e.currentTarget.id; 
    if($scope.init){
      if(sequence[turn] === id){
        turn++;
        if(turn === sequence.length){
          $scope.step++;
          setTimeout(function(){
            newRound();
          }, 1000);
        }
      }else{
        if($scope.isStrict){
          setTimeout(function(){
            alert('game over');
          $scope.reset();  
          }, 300);
        }else{
          $scope.displaySeq(sequence);
        }
      }  
    } 
  }

I believe the problem is your are using isolated scope which means within your template check($event) is undefined. — tylerwal
– tylerwal, Commented Jan 20, 2016 at 17:42

vittore · Accepted Answer · 2016-01-20 18:11:24Z

You cannot call controller method from directive like that.

In case you need scope isolation you have to use expression binding ( '&' scope parameters) or turn off scope isolation all together ( remove scope key from directive definition )

See excellent video from John Lindquist for example of using scope expression binding.

    var app = angular.module('app', [])

    app.directive("pads", function() {
    return {
        restrict: "E",
        scope: {
            check: "&"
        },
        template: '<div class="button" ng-click="check({message: value})">click</div></div>',
        link: function(scope) {
          scope.value = 'message to controller'
        }
    };
    });

    app.controller('myCtrl', function() {

       this.doCheck = function(message) {
         alert(message) // alerts "message to controller"
 
       }

    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='myCtrl as ctrl'>
    <pads check="ctrl.doCheck(message)"></pads>
</div>

Collectives™ on Stack Overflow

ng-click in directive not calling function defined in controller scope

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related