CODEWITHSUNDEEP
javascriptjqueryangularjssingle-page-applicationreferenceerror
FreshOceans
FreshOceans

Reputation: 63

AngularJS Single Page App: Reference Error, ____ is not defined

In my Single Page App, specifically in the javascript file I am getting an error for uncaught reference for the reroll function. I do not understand what is causing this issue. Is my js file setup the wrong way? The specific error stated is, Reference Error, reroll is not defined.

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

Upvotes: 1

Views: 762

Answers (1)

Bogdan Ene
Bogdan Ene

Reputation: 26

reroll(newVal) should be $scope.reroll(newVal);

Also remove the 

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

Upvotes: 1

Related Questions