时间:2017-04-19 16:29:16

标签: angularjs callback directive

我试图从InterviewRecorderController调用 onStart(),但它没有调用回调。当我将 onStart:&#39;&amp;&#39; 更改为 onStart:&#39; =&#39; 时,回调功能正常但上下文为< strong> InterviewRecorderController 而不是 InterviewController

感谢您的帮助

&#13;
&#13;
Interview

<div class="text-center">
  <div class="h3 font-thin text-info m-b">In order to prepare your custom plan, we need to hear how you currently speak{{interview.description}}</div>
  <div class="h3 font-thin text-info m-b">When you are ready press on the microphone to start recording (dont have )</div>
  <interview-recorder on-start="interview.onStart"></interview-recorder>
  <div ng-if="interview.isRecording">
    <div class="m-t" ng-if="$index == interview.t_index" ng-repeat="t in interview.topics">
      <div class="animated font-thin h3" ng-class="{'fadeInLeft':$index == interview.t_index,'fadeOutRight':$index != interview.t_index}">{{t.pbData.cleanInput}}</div>
    </div>
    <div class="btn btn-default btn-addon m-t" ng-click="interview.t_index = interview.t_index + 1">Next topic<i class=" icon-control-forward"></i></div>
  </div>
</div>
&#13;
&#13;
&#13;

&#13;
&#13;
interviewRecorder

<div class="text-center">
  <div class="m-b"><timer on-finish="interviewRecorder.onFinish" state="interviewRecorder.timerState" class="h3" total-seconds="interviewRecorder.seconds" mode="stopWatch"></timer><div>
  <div ng-class="{'animated':interviewRecorder.timerState}" class="infinite pulse" tooltip-trigger="mouseenter" tooltip="{{interviewRecorder.tr('MEDIA_SETTINGS.READY')}}" tooltip-placement="top">
      <span ng-class="{'btn-primary':interviewRecorder.timerState}" class="btn btn-default btn-icon btn-rounded btn-lg" ng-click="interviewRecorder.onStartRec()">
          <i class="icon-microphone"></i>
      </span>
  </div>
</div>
&#13;
&#13;
&#13;

&#13;
&#13;
class InterviewController{

  constructor($scope,$translate,PhrasesBankService,presetService,languageService){
    //this.questions = $scope.data.questions;
    this.t_index = 0;
    this.tr = $translate.instant
    //this.seconds = 10;
    this.isRecording = false;
    this.topics = PhrasesBankService.getTopics(presetService.topicTypes.basicTopic.type,'en_usa');
  }
  onStart(){
    this.isRecording = true;
  }
  onfinish(){
    var bla = 123213;
  }

}

angular.module('novotalkWebApp').controller('InterviewController',InterviewController);
angular.module('novotalkWebApp').directive('interview', function () {
    return {
        restrict: 'E',
        templateUrl: 'app/web/components/poll/interview.html',
        controller: 'InterviewController',
        controllerAs:'interview',
        bindToController:true,
        scope:{
          data : '='
        }
    };
});
&#13;
&#13;
&#13;

&#13;
&#13;
class InterviewRecorderController{
  constructor($translate,$scope){
    this.timerState = false;
    this.seconds = 10;
    this.tr = $translate.instant;
    this.$scope = $scope;;
  }
  onFinish(){

  }
  onStartRec(){
    this.timerState = true;
    this.onStart();
  }
}
angular.module('novotalkWebApp').controller('InterviewRecorderController',InterviewRecorderController);
angular.module('novotalkWebApp').directive('interviewRecorder',() => {
  return {
      restrict: 'E',
      templateUrl: 'app/web/components/interviewRecorder/interviewRecorder.html',
      controller: 'InterviewRecorderController',
      controllerAs:'interviewRecorder',
      bindToController: {
        onStart:'&'
      }

  };
});
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

这对你有用,

<interview-recorder on-start="interview.onStart()"></interview-recorder>