javascript - 指令中的 ng-click 不调用 Controller 范围中定义的函数

Question

一切似乎都正确渲染，但当我单击四个按钮之一时，我的 ng-click="check($event)" 没有触发。我什至向 check($event) 函数添加了一个警报，但它没有出现。这是代码笔 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
  };
  }]);

这是 Controller 中的check()函数

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

Answer 1

您不能像这样从指令调用 Controller 方法。

如果您需要范围隔离，则必须使用表达式绑定(bind)(“&”范围参数)或一起关闭范围隔离(从指令定义中删除 scope 键)

查看优秀video来自 John Lindquist 的使用范围表达式绑定(bind)的示例。

    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>