AngularJS：私は、条件を書くべきリロールボタン（reloadRoute ??）と結合する2ウェイデータに関数を適用する

Question

AngularJS APP

私は、私は無限のダイジェストループのこの問題を解決することができる方法を理解したいと思います？

目的は、angleの2-wayデータバインディングを使用することですが、ランダムに文字を並べ替えるために出力を変更する必要があります。

マイHTML：

   <div class="container-fluid phrase-container text-center"> 
       <!-- == User Phrase Input == --> 
       <input type = "text" ng-model = "phrase.firstPhrase" placeholder="Please enter phrase"><br><br> 
      </div> 

       <div class="container-fluid anagram-container text-center"> 
       <!-- == Final anagram == --> 
       Anagram: {{phrase.fullAnagram()}} 
      </div> 

私のjavascript：スコープモデルの

var app = angular.module("app", []); 

    app.controller('mainController', function($scope) { 
    $scope.main = {}; 
    $scope.main.title = "AnagramJS"; 

// Refresh Page acts as reroll button 
$scope.reloadRoute = function() { 
    $route.reload(); 
}; 

// Anagram Creation 
$scope.phrase = { 
    firstPhrase: "", 
    fullAnagram: function() { 
     var finalPhrase; 
     finalPhrase = this.firstPhrase.split('').sort(function() { 
      return 0.5 - Math.random() 
     }).join(''); 

     return finalPhrase 

    } 
}; 
    }); 

Answer 1

シンプル$時計が正常に動作するようですので、あなたが使用することができます

<input ng-model="word" type="text"/> 
<p> 
    {{anagram}} 
</p> 

とJSで：

$scope.$watch('word', (newVal, oldVal) => { 
if (newVal) { 
    // set anagram to randomize 
    $scope.anagram = newVal.split('').sort(function() { 
    return 0.5 - Math.random() 
    }).join(''); 
} else { 
    // empty anagram if word is empty 
    $scope.anagram = ""; 
} 
}); 

あなたはそれがこのフィドルでどのように機能するかを確認することができます。https://fiddle.jshell.net/pegla/kemrr0ka/4/

をUPDATE：リロールボタンのルーティングを使用する必要はありません

、あなたは、単に関数を作成し、複数回呼び出すことができ、私は1つの方法を追加私の最新のバイオリンでそれをやって：

https://fiddle.jshell.net/kemrr0ka/5/