AngularJS：如何在组件中使用回调？

Question

有此代码。必须进行呼叫onFinish，并在其中传递参数timer和$$endTime。但是当我打电话给$ctrl.onFinish(parameter)时，出现了这个异常：

  

发生TypeError错误：$ ctrl.onFinish不是函数

如何正确实现回调调用？

angular.module('myApp', []).controller('MyCtrl', function($scope) {
  	var $ctrl = this;

    $ctrl.$onInit = function() {    
    	$ctrl.timerId = 0;
        $ctrl.timers = [];
        $ctrl.addTimer(10);
        $ctrl.addTimer(3);          
    }

    $ctrl.addTimer = function(seconds) {
        $ctrl.timers.push({
          id: this.timerId++,
          seconds: seconds*100
        });  
        $ctrl.startTimer($ctrl.timers[$ctrl.timers.length - 1]);
    }
    
    $ctrl.startTimer = function(timer) {
    	var i = setInterval(() => {
            $scope.$apply(function() {
                timer.seconds -= 1; 
                if (timer.seconds == 0) {
                    $ctrl.end();
                    clearInterval(i);
                }
            })
        }, 1)
    }

        
    $ctrl.end = function() {
        $ctrl.onFinish({
            timer: {
               id: 1
            },
            $endTime: '123124'
        });
    }
    
    $ctrl.myFunction = (timer, $endTime) => {
    	$ctrl.status = 'Timer ' + timer.id + ' finished at ' + $endTime
    }

    $ctrl.removeTimer = function(index){
        $ctrl.timers.splice(index, 1);
    }
}).component('myTimer', {
    controller: 'MyCtrl',
    bindings: {
        startSeconds: '<',
        onFinish: '&',
    },
    template: `<span >{{$ctrl.startSeconds}}</span>`,
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl as myCtrl">
  <div>
    Status: {{status ? status : 'Waiting...'}}
  </div>
  <div>
    <button ng-click="myCtrl.addTimer(5)">Add timer</button>
  </div>
  <div ng-repeat="timer in myCtrl.timers">
    <div>
      <h3>Timer {{::timer.id}}</h3>
      <button ng-click="myCtrl.removeTimer($index)">X</button>
      <my-timer start-seconds="timer.seconds"
                on-finish="myFunction(timer, $endTime)">
      </my-timer>
    </div>
  </div>
</div>

Answer 1

错误非常明显：

  

$ ctrl.onFinish不是函数

的确是，不是功能。要修复它，您应该像这样使用组件：

<my-timer start-seconds="timer.seconds" on-finish="myFunction(timer, $endTime)"></my-timer>

并在相应的控制器中：

$ctrl.myFunction = function(timer, $endTime){
    $ctrl.status = 'Timer ' + timer.id + ' finished at ' + $endTime
}

请注意，您的onEnd函数应像这样使用onFinish：

$ctrl.onEnd = function () {
    $ctrl.onFinish({
        timer: {
            id: 1
        },
        $endTime: '123124'
    });
}

Answer 2

您可以尝试

 onFinish: '&' --> onFinish: '='

哦，很抱歉，该行中的错误

$ctrl.end = function() {
    $ctrl.onFinish({
        timer: { id: 1 },
        $endTime: '123124'
    });
 }