Question

我一直试图通过angularjs使用WebSpeech Api。一切似乎都有效，但模型并没有立即更新。

如果我再次开始识别，模型会更新。似乎有些内环/其他结构保持角度以查看变化。

以下是我制作的codepen。

重现步骤：
1.单击开始，然后说出
2.识别后，再次检测到词尾结束，再开始另一次识别 3.第二次识别开始后，模型将使用之前的成绩单进行更新。

注意：如果执行下面的console.log，则显示正确的记录，表示识别部分正常工作。

if(event.results[i].isFinal) {
  self.final = self.final.concat(event.results[i][0].transcript);
  console.log(event.results[i][0].transcript);
}

Answer 1

一切似乎都很完美，除了你忘了叫$ scope。$ apply（）;当您修改值以使其对视图生效时。所以它应该是这样的，

angular.module('speech',[]);

angular.module('speech').controller('speechController', function($scope) {
  this.rec = new webkitSpeechRecognition();
  this.interim = [];
  this.final = '';
  var self = this;

  this.rec.continuous = false;
  this.rec.lang = 'en-US';
  this.rec.interimResults = true;
  this.rec.onerror = function(event) {
    console.log('error!');
  };

  this.start = function() {
    self.rec.start();
  };

  this.rec.onresult = function(event) {
    for(var i = event.resultIndex; i < event.results.length; i++) {
      if(event.results[i].isFinal) {
        self.final = self.final.concat(event.results[i][0].transcript);
        console.log(event.results[i][0].transcript);
        $scope.$apply();

      } else {
        self.interim.push(event.results[i][0].transcript);
      }
    }
  };

});

我已使用工作解决方案更新了您的codepen。

AngularJs在视图中创建的所有数据绑定内部创建一个“监视”并调用$ scope。$ digest（），其中inturns迭代所有监视并检查是否有任何监视变量已更改。当你调用$ scope。$ apply（）时，它在内部调用$ scope。$ digest（），这样数据绑定就会被刷新。

监听器指令（例如ng-click）向DOM注册监听器。当DOM侦听器触发时，该指令执行关联的表达式并使用$ apply（）方法更新视图。

当收到外部事件（例如用户操作，计时器或XHR）时，必须通过$ apply（）方法将关联表达式应用于作用域，以便正确更新所有侦听器（ref ）。

因此，在您的情况下，当您再次单击下一个开始按钮（ng-click）时，视图会更新，而不会在录制事件发生时进行更新。

也可以用来阅读this

通过AngularJS使用WebSpeech API

1 个答案: