1

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

如果我再次开始识别，模型就会更新。似乎某些内部循环/其他构造正在保持角度以查看更改。

这是我制作的codepen。

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

注意：如果一个 do console.log 如下所示，那么它显示正确的成绩单，意味着识别部分工作正常。

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

1 回答 1

2

一切看起来都很完美，除了你忘了调用 $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() 来遍历所有监视并检查任何监视变量是否已更改。当您调用 $scope.$apply() 时，它会在内部调用 $scope.$digest() 以便刷新数据绑定。

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

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

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

阅读本文也很有用

于 2016-02-27T19:24:04.160 回答