使用 WebSpeech API 到 AngularJS

Question

我一直在尝试通过 angularjs 使用 WebSpeech Api。一切似乎都有效，但模型不会立即更新。

如果我再次开始识别，模型就会更新。似乎某些内部 loop/other 构造正在持有 angular 以查看更改。

这是我制作的codepen。

重现步骤：
1.点击开始，说话
2.识别检测到语音结束后，再次点击开始，开始另一次识别。
3. 一旦第二次识别开始，模型就会更新为之前的成绩单。

Note: If a do console.log as below then it shows correct transcript, means the recognition part is working fine.

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 为在视图中创建的所有数据绑定在内部创建一个 "watch" 并调用 $scope.$digest() 这反过来遍历所有监视并检查是否有任何监视变量已改变。当您调用 $scope.$apply() 时，它会在内部调用 $scope.$digest() 以便刷新数据绑定。

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

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

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

阅读 this

也很有用

使用 WebSpeech API 到 AngularJS

Using WebSpeech API through AngularJS

javascript

angularjs

webspeech-api