角度 - 約束（$ state.go関数）をタイムアウト関数に連結する方法は？

Question

私は 'タイムアウト/タイプライターエフェクト'関数に約束を張り切っているので、関数が終了したら単純な$ state.goという別の関数を呼び出す必要があります。私は多くの記事を研究していますが、何も試してみません。最初の関数は決して実行されていません。実行されているかもしれませんが、速くて何も見えないほど速く、2番目の（$ state.go）関数はすぐに実行されます。 アイデアをいただければ幸いです。ありがとうございました！

app.controller('homeCtrl', function($scope, $state, $q, $interval, $timeout) { 
    function beginn() { 
     var content = "helloo" 
     $scope.typewriter = ""; 
     var i = 0; 
     var timer = $interval(function() { 
      if (i < content.length) 
       $scope.typewriter += content[i]; 
      else { 
       $interval.cancel(timer); 
      } 
      i++; 

     }, 300) 
    } 

    function change() { 
     $state.go('profile') 
    } 

    $q.when(beginn()).then(change); 

}); 

HTML：インターバル中にあなたの変数のスコープ緩いトラックは、あなたがスコープは、あなたが使用して変更を行ったことを知らせる必要があるので、私はあなたが何を見ていないと思います

<p>{{typewriter}}</p> 

Answer 1

なぜ、2つの約束を結ぶ必要がありますか？あなたがする必要があるのは、文字が押されたときにただ$state.goを行うことだけです。

.controller('demoCtrl', ['$scope', '$state', '$interval', function($scope, $state, $interval) { 
    var content = "helloo" 
    $scope.typewriter = ""; 
    var i = 0; 
    var timer = $interval(function() { 
    if (i < content.length) { 
     $scope.typewriter += content[i]; 
    } else { 
     $state.go('home') // just go to the state directly 
    } 
    i++; 
    }, 300) 
}]) 

plnkr here

作業を編集

あなたたいが、それあなたの（機能）の方法を行う場合は、繰延約束を作成する必要があります、そしてあなたがいるときにそれを拒否/解決のいずれか手紙を押してやった。 plnkr here

Answer 2

$ scope。$適用します。

あなたのコードは次のようになります。

 var timer = $interval(function() { 
      if (i < content.length){ 
       $scope.typewriter += content[i]; 
       $scope.$apply(); 
      else { 
       $interval.cancel(timer); 
      } 
      i++; 

     }, 300) 

Answer 3

作業

function begin() { 
    var deferred= $q.defer();//create a deferred object using $q 

    var content = "helloo"; 
    $scope.typewriter = ""; 
    var i = 0; 
    var timer = $interval(function() { 
     if (i < content.length) { 
     $scope.typewriter += content[i]; 
     } else { 
     deferred.resolve(); //resolve this when done 
     } 
     i++; 
    }, 300); 
    return deferred.promise; // return the promise of the deferred object 
    } 

    begin().then(()=>$state.go('home')) // call it as usual, but using .then 

あなたのコードが動作しない理由は、$intervalコールバックが実行される機会を得る前に、それが（呼び出されたときに、それはすぐにwhen戻りundefinedで呼び出されbeginn機能は非常に簡単です $q.when（undefinedが返されたbeginn()）に同期値を提供しているので、約束が直ちに解決され、thenブロックのchange機能がすぐに呼び出されます。 $intervalに移動します。

あなたはまだあなたがこれはあなたのコードを書くべきかである約束のAPIを使用したいと思うなら：

app.controller('homeCtrl', function($scope, $state, $q, $interval, $timeout) { 
function beginn() { 
    var content = "helloo" 
    $scope.typewriter = ""; 
    var i = 0; 
    return $q(function(resolve, reject) { 

     var timer = $interval(function() { 
      if (i < content.length) 
       $scope.typewriter += content[i]; 
      else { 
       $interval.cancel(timer); 
       resolve(); 
      } 
      i++; 

     }, 300);   
    }); 
} 

function change() { 
    $state.go('profile') 
} 

beginn().then(change); 

}）;

どうすればいいですかbeginn()はすぐに約束を返しますが、ジョブが完了したらタイマーをキャンセルしたいだけです。 $q.whenを使用する必要がなくなったことにも注目してください。