Javascript 通过AngularJS使用WebSpeechAPI

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

如果我再次启动识别，模型将更新。似乎有些内部循环/其他构造保持角度以查看更改

这是我做的

复制步骤：
1.单击开始，然后讲话
2.识别检测到语音结束后，点击再次启动以启动另一个识别。
3.一旦第二次识别开始，模型就会用以前的转录本更新

注意：如果do console.log如下所示，则显示正确的转录本，表示识别部分工作正常

---

除了忘记调用$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);
      }
    }
  };

});

angular.module（'speech'，[]）；
角度.module（'speech'）.controller（'speechController'，function（$scope）{
this.rec=new-webkitSpeechRecognition（）；
this.mediate=[]；
这个.final=''；
var self=这个；
this.rec.continuous=false；
this.rec.lang='en-US'；
this.rec.interimResults=true；
this.rec.onerror=函数（事件）{
console.log（'error！'）；
};
this.start=函数（）{
self.rec.start（）；
};
this.rec.onresult=函数（事件）{
对于（var i=event.resultIndex；i

我已经用你的工作解决方案更新了

AngularJs在内部为在view中创建的所有数据绑定创建一个“监视”，并调用$scope.$digest（），该函数将遍历所有监视并检查任何监视的变量是否已更改。调用$scope.$apply（）时，它会在内部调用$scope.$digest（），以便刷新数据绑定

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

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

所以，在您的案例中，视图在您再次单击下一个开始按钮（ng click）时得到更新，而不是在录制事件发生时得到更新

---

阅读

也很有用，但我以前从未做过类似的事情，angular不应该自动注意到模型的变化吗？就像在大多数情况下发生的一样？而且这个解决方案根本解决不了问题。检查这个，我可以看到文本框中反映了值。你对脚本还有其他问题吗？是的，这似乎有效，但我的问题仍然没有答案。为什么我们需要$scope.$apply？模型应该自己看到变化如果你阅读angularjs范围文档，已经有了解释“为了正确观察突变，你应该只在范围内进行。$apply（）.Angular API隐式执行此操作，因此在控制器中执行同步工作或使用$http、$timeout或$interval服务执行异步工作时，不需要额外的$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);
      }
    }
  };

});