2015-12-03 126 views
0

我使用angular-webspeech-directiveAngularJs如何檢測範圍可變對象改變

這裏的HTML代碼:

<!DOCTYPE html> 
<html ng-app="plunker"> 

<head> 
    <meta charset="utf-8" /> 
    <title>TestBed</title> 
    <link data-require="[email protected]" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" /> 
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" /> 
    <link rel="stylesheet" href="css/style.css" /> 

</head> 

<body ng-controller="MainCtrl" ng-cloak=""> 

<div class="container"> 

    <div class="row"> 
     <div class="col-md-12"> 

      asdfasdf 
      <js-speech ng-model="speech"></js-speech> 

      <!-- 
      <pre>js-speech ng-model="speech"</pre> 
      <br />--> 

      <strong>Debugger</strong> 
      <pre>$scope.speech:{{speech|json}}</pre> 
     </div> 
    </div> 
</div> 

<!-- Application Scripts --> 
<script data-require="[email protected]" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script> 
<script data-require="[email protected]" data-semver="2.6.2" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.js"></script> 



<script src="js/Speech.js"></script> 
<script src="js/speechapp.js"></script> 

</body> 

</html> 

這裏的角speechapp.js

(function() { 
    var app; 

    app = angular.module("plunker", ["jonniespratley.angularWebSpeechDirective"]); 

    app.controller("MainCtrl", function($scope) { 


     return $scope.speech = { 
      maxResults: 25, 
      continuous: true, 
      interimResults: true 
     }; 

     $scope.$on('onresult', function() {console.log("---->speech.interimResults<----");}); 

     $scope.test=function(){ 
      console.log("---->speech.interimResults<----"); 
     } 
     $scope.$digest(); 
     $scope.$watch('$scope.speech.interimResults', function() {console.log("---->speech.interimResults<----"); }, true); 

     $scope.$watch('speech.interimResults', function(newVal, oldVal) { 
      //do something here like get the text input value and send to api 
      //after speaking even the value of speech.intermResults change this does not get triggered. 
      return console.log(newVal); 
     }, true); 
    }); 

}).call(this); 

什麼,我想發生只要用戶完成了對麥克風的講話,我就可以得到輸入文本,因此我可以發佈文本內容。我需要獲取文本輸入的內容並能夠將其發送到API,但是我找不到指令的onresult事件的鉤子。

這是一個很好的方法來觀察scope.speech,我試過$ scope。$看看$ scope.speech是否被更改,但它不工作。預先感謝您的幫助。

+0

這將幫助你。 http://stackoverflow.com/questions/32347881/check-array-value-exist-or-not-using-watch-function-in-angular-js/32347956#32347956 –

回答

5

請勿使用$scope引用$watch中的範圍變量。因此,而不是

$scope.$watch('$scope.speech.interimResults', function() { 
    console.log("---->speech.interimResults<----"); 
}, true); 

你應該寫

$scope.$watch('speech.interimResults', function() { 
    console.log($scope.speech.interimResults); 
}, true);