AngularJS 单页应用程序:引用错误,____ 未定义



在我的单页应用程序中,特别是在javascript文件中,我收到一个错误,用于重新滚动函数的未捕获引用。我不明白是什么导致了这个问题。我的 js 文件设置方式错误吗?所述的具体错误是,引用错误,未定义重滚。

.HTML:

<body ng-app="app">
  <!-- == Main Controller for SPA == -->
  <div class="container-fluid bg-dark text-white" style="height:700px" ng-controller="mainCtrl">
    <!-- == App Title == -->
    <h2 class="display-2 title-container text-center">{{main.title}}</h2>
    <div class="row">
      <div class="container-fluid word-container text-center">
        <!-- == User Phrase Input == -->
        <input type="text" ng-model="word" placeholder="Please enter word">
        <br>
        <br>
      </div>
    </div>
    <div class="row">
      <div class="container-fluid anagram-container text-center">
        <!-- == Final anagram ==  -->
        Anagram: {{anagram}}
      </div>
    </div>
    <div class="row">
      <div class="container-fluid button-container text-center">
        <!-- Anagram "Reroll" Button -->
        <button type="button" ng-click="reroll(word)" class="btn btn-primary btn-large">Reroll</button>
        <!-- Anagram "Clear" Button -->
        <button type="button" class="btn btn-primary btn-large" ng-click="word=''">Clear</button>
      </div>
    </div>
  </div>
</body>

Javascript:

var app = angular.module("app", []);
app.controller('mainCtrl', function($scope) {
  $scope.main = {};
  $scope.main.title = "AnagramJS";
  $scope.reroll = function reroll(value) {
    // set anagram to randomize
    $scope.anagram = value.split('').sort(function() {
      return 0.5 - Math.random()
    }).join('');
  };
  $scope.$watch('word', (newVal, oldVal) => {
    if (newVal) {
      reroll(newVal);
    } else {
      // empty anagram if word is empty
      $scope.anagram = "";
    }
  });
  angular.extend($scope, {
    reroll
  });
});

reroll(newVal)应该$scope.reroll(newVal);

同时删除

angular.extend($scope, {
    reroll
});

最新更新