AngularJS：使用重新滚动按钮将函数应用于 2 向数据绑定（reloadRoute？？）

Question

我想知道如何解决这个无限摘要循环的问题，我应该写一个条件吗？

objective是使用angular的2向数据绑定，但我需要修改输出以随机排序字母。

我的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

范围模型上的简单 $watch 似乎工作正常，因此您可以使用：

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

您可以在 fiddle 中查看它的工作原理：https://fiddle.jshell.net/pegla/kemrr0ka/4/

更新：

重新滚动按钮不需要使用路由，你可以简单地创建函数并多次调用它，我在最新的 fiddle:

中添加了一种方法

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

AngularJS：使用重新滚动按钮将函数应用于 2 向数据绑定（reloadRoute？？）

AngularJS: Applying a function to 2-way data binding with a reroll button (reloadRoute??)

javascript

conditional

angularjs

angularjs-rootscope

angular2-databinding