AngularJS function calls using arrays

Question

This AngularJS function isn't working quite the way I would expect it to:

app.controller('MainController', ['$scope', 'ForTHEOrder', function($scope, commence) { 
  commence.success(function(boolean) { 
    $scope.rabbitCat = boolean; 
    $scope.clownFox = boolean; 
    $scope.mongolFaun = boolean; 
    $scope.deerWolf = boolean; 
    $scope.stoatFire = boolean; 
    $scope.bearDragon = boolean; 
    $scope.deadWeasel = boolean; 
    $scope.n_nUrsulafox = boolean; 
  }); 
  commence.failure(function(boolean) { 
    $scope.rabbitCat = boolean; 
    $scope.clownFox = boolean; 
    $scope.mongolFaun = boolean; 
    $scope.deerWolf = boolean; 
    $scope.stoatFire = boolean; 
    $scope.bearDragon = boolean; 
    $scope.deadWeasel = boolean; 
    $scope.n_nUrsulafox = boolean; 
  }); 
}]);

It should be passing an array into the function call, containing a set of objects, which are then utilised by the nested function call. However, that doesn't seem to be what's actually happening and when I try to run the code I get an error. I can post the HTML if need be, but what interests me is the action of the array. Does anyone have suggestions as to what the array is doing here?

I am currently getting the following error message:

Error: $scope.success is not a function
@http://www.orderofthemouse.co.uk/js/controllers/MainController.js:102:3
e@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:36:338
Ce/this.$get</</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:75:387
H/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:59:19
r@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:7:406
H@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:59:2
g@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:51:299
g@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:51:316
C/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:50:414
rc/d/</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:17:477
Me/this.$get</k.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:125:116
Me/this.$get</k.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:125:330
rc/d/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:17:435
e@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:36:338
rc/d@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:17:356
rc@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:18:151
Gd@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:16:463
@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:249:238
a@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:164:4
gf/c@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:32:280

The HTML code requested is as follows:

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>The Order of the Mouse</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/jpg" href="./ico/favicon.jpg">
    <meta name="description" content="Psychological horror/detective/spiritual RPG set the medieval, magical future world of 2079; Web-Based">
    <meta name="keywords" content="RPG, Horror, Detective, Order of the Mouse, Rabbit-Cat, Dragon-Bear, Clown-Fox, Deer-Wolf">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="./vendor/jquery-1.11.3.min.js"></script>
    <script src="./vendor/bootstrap.min.js"></script>
    <script src="./vendor/underscore.js"></script>
    <script src="./vendor/backbone.min.js"></script>
    <script src="./vendor/backbone.marionette.min.js"></script>
    <script src="./react/build/react.min.js"></script>
    <script src="./react/build/react-dom.min.js"></script>
    <script src="http://www.wavepot.com/build.js"></script>
    <script src="http://www.wavepot.com/app.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,200' rel='stylesheet' type='text/css'>
    <link href="css/main.css" rel="stylesheet" />
  </head>
  <body ng-app="myApp">
    <div class="header">
      <div class="container">
        <h1></h1>
      </div>
    </div>

    <div class="main" ng-controller="MainController">
      <div class="container">

        <h1>{{ title }}</h1>
         <h2>{{ placeholder }}</h2>

        <div ng-repeat="character in characters" class="col-md-6"> 
                <div class="thumbnail"> 
                    <img ng-src="{{  }}"> 
                    <p class="name">{{ character.name }}</p> 
                    <p class="name">{{ character.age }}</p>
                    <p class="url"><a href="http://orderofthemouse.co.uk/">{{ character.url }}</p></a>
                    <p class="coolness">{{ success.rabbitCat }}</p> 
                    <p class="warmness">{{ failure.rabbitCat }}</p> 
                    <div class="HP">
                        <p class="Up" ng-click="plusOne($index)"> {{  }} </p>
                        <p class="Down" ng-click="minusOne($index)"> {{ }} </p>
                    </div>
                </div> 
                </div>

      </div>
    </div>

    <div class="footer">
      <div class="container">
        <h2></h2>
        <img style="display: none" src="" width="" />
      </div>
    </div>

    <script>
    import sin from '<redacted>'; 
    import { noise } from '<redacted>';

    export function dsp(t) {
    return (sin(t, 440) + noise()) * 0.1;
    }
    </script>

    <audio controls autoplay>
       <source src="DozyOuija.ogg" type="audio/ogg">
       <source src="DozyOuija.mp3" type="audio/mp3">
       <p>Your User Agent does not support the HTML5 Audio element.</p>
    </audio> 



    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/MainController.js"></script>
    <script>
<!-- Analytics -->
<!-- ANALYTICS REDACTED -->
    </script>
  </body>
</html>

Let me know if anyone needs further details to help them get to the bottom of the problem.

"I get an error". Do you think the error can be of any interest? — dfsq
– dfsq, Commented Oct 31, 2015 at 10:21
It outputs an error saying the array of $scope is undefined then shows {{ rabbitCat.boolean }} instead of displaying the boolean. — Peter Carter
– Peter Carter, Commented Oct 31, 2015 at 10:24
Now displaying a slightly different error. Amended info to reflect. — Peter Carter
– Peter Carter, Commented Oct 31, 2015 at 11:46
The error message isn't of much use without the full source code (so that the program can actually be run). — Nimble
– Nimble, Commented Nov 4, 2015 at 16:52

uksz · Accepted Answer · 2015-10-31 10:59:38Z

1

Try this:

    app.controller('MainController', ['$scope', 'ForTHEOrder', function($scope, commence) { 
  commence.success(function(boolean) { 
    $scope.rabbitCat = boolean; 
    $scope.clownFox = boolean; 
    $scope.mongolFaun = boolean; 
    $scope.deerWolf = boolean; 
    $scope.stoatFire = boolean; 
    $scope.bearDragon = boolean; 
    $scope.deadWeasel = boolean; 
    $scope.n_nUrsulafox = boolean; 
$scope.$apply();
  }); 
  commence.failure(function(boolean) { 
    $scope.rabbitCat = boolean; 
    $scope.clownFox = boolean; 
    $scope.mongolFaun = boolean; 
    $scope.deerWolf = boolean; 
    $scope.stoatFire = boolean; 
    $scope.bearDragon = boolean; 
    $scope.deadWeasel = boolean; 
    $scope.n_nUrsulafox = boolean; 
$scope.$apply();
  }); 
}]);

answered Oct 31, 2015 at 10:59

uksz

18.4k31 gold badges102 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peter Carter Over a year ago

Thanks. It has at least progressed things somewhat. Still getting an error, though :/.

Peter Carter Over a year ago

Added. Let me know if you need anything else.

Collectives™ on Stack Overflow

AngularJS function calls using arrays

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related