CODEWITHSUNDEEP
javascripthtmlangularjs
Learner Always
Learner Always

Reputation: 1926

Angular JS scope variable not working

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>

Upvotes: 0

Views: 1811

Answers (1)

Ilan Frumer
Ilan Frumer

Reputation: 32357

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">

Upvotes: 3

Related Questions