AngularJS와하십시오 굴릴 버튼 (reloadRoute ??)와 바인딩 기능 양방향 데이터를 적용

Question

AngularJS APP

내가 조건부를 작성해야, 내가 무한한 다이제스트 루프의이 문제를 해결할 수있는 방법을 이해하고 싶은

?

목표는 각도의 양방향 데이터 바인딩을 사용하는 것이지만, 문자를 임의로 정렬하려면 출력을 수정해야합니다.

내 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> 

내 자바 스크립트 :

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

그리고 JS의를 : 사용할 수 있도록

이

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

범위 모델에 대한 간단한 $ 시계가 잘 작동하는 것 같다 :

$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 = ""; 
} 
}); 

UPDATE :

, 당신은 단순히 여러 번 함수를 작성하고 호출 할 수 있습니다 굴릴 버튼에 대한 라우팅을 사용할 필요가 없다, 내가 추가 한 방법이이 바이올린에서 작동하는 방법 17,451,515,

확인할 수 있습니다 내 최신 바이올린에 그 일 :

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

난 그냥 단어를 다시 리조트 것 굴릴 버튼을 추가 할 수있는 방법