Angular JS scope variable not working

Question

Learning to use angularJS,

I have this particular code in my index.html. Dynamic typing works in the upper part, but the injection doesn't. What possibly might have been gone wrong?

Code :

<!DOCTYPE html>
<html>
   <head>
      <title>Test1</title>
   </head>
   <body ng-app="">
<!-- Dynamic Type -->

      <input type="text" ng-model="name1" /><br>
      <h1>Hello {{name1}}</h1>

<!-- End dynamic Type -->

 <!-- Scope Injection begin-->
      <div class="container" ng-controller="myController">
         <input type="text" ng-model="naam" /><br>
         <h3>Looping</h3>
         <ul>
            <li data-ng-repeat="cust in customerlist | filter:naam | orderBy:'city'"> {{cust.name | uppercase}} - {{cust.city}} </li>
         </ul>
      </div>
      <script type="text/javascript" src="js/angular.min.js"></script>
      <script type="text/javascript">
         function myController ($scope) {

             $scope.customerlist = [
             {name: 'Raj Bannerjee', city: 'Zaire'},
             {name: 'Prasun Bannerjee', city: 'Udaipur'},
             {name: 'Raj Malhotra', city: 'Dubai'},
             {name: 'Prasun Joshi', city: 'Mumbai'}
             ];

         }

      </script>
   </body>
</html>

How do you see it not working? Here is a jsfiddle with it (slightly modified) that works fine. jsfiddle.net/b69p4zj9 — deitch
– deitch, Commented Nov 23, 2014 at 8:44
you need to tell angular that myController is a controller angular.controller('myController', function($scope) {.... — Simon H
– Simon H, Commented Nov 23, 2014 at 9:08
@deitch no I had been following an ebook, where it was simply working with the code. But when I tried, it didn't. Learning has to be from scratch, that's why :D Thanks for the modification :) will have to do some more reading it seems — Learner Always
– Learner Always, Commented Nov 23, 2014 at 9:32

Ilan Frumer · Accepted Answer · 2014-11-23 09:33:38Z

From version 1.3 angular disabled using global controller constructors:

https://github.com/angular/angular.js/commit/3f2232b5a181512fac23775b1df4a6ebda67d018

With the exception of simple demos, it is not helpful to use globals for controller constructors. This adds a new method to $controllerProvider to re-enable the old behavior, but disables this feature by default.

BREAKING CHANGE: $controller will no longer look for controllers on window. The old behavior of looking on window for controllers was originally intended for use in examples, demos, and toy apps. We found that allowing global controller functions encouraged poor practices, so we resolved to disable this behavior by default.

So you must refactor it like so:

angular.module('app',[])

.controller('myController', ['$scope', function($scope) {
  $scope.customerlist = [
    {name: 'Raj Bannerjee', city: 'Zaire'},
    {name: 'Prasun Bannerjee', city: 'Udaipur'},
    {name: 'Raj Malhotra', city: 'Dubai'},
    {name: 'Prasun Joshi', city: 'Mumbai'}
  ];
}]);

And also refer to your module:

<body ng-app="app">

Collectives™ on Stack Overflow

Angular JS scope variable not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related