CODEWITHSUNDEEP
javascriptangularjs
John Doe
John Doe

Reputation: 2924

Why $scope is not defined here in the following code

I am working with Angular 1.x and here is the code which was giving errors:-

<!DOCTYPE html>
 <html>
  <head>
    <title>Angular JS Controllers</title>
  </head>   
  <body>
    <div ng-app="app">
      <h1>Controllers</h1>
       <div ng-controller="MainCtrl">
         <p>{{message}}</p>
       </div> 
     </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
    <script type="text/javascript">
      angular.module('app', [])
         .controller('MainCtrl', [$scope, function($scope){
           $scope.message = "Hello";
         }]);
    </script>
   </body>
  </html>

It was giving error ReferenceError: $scope is not defined

I thought may be $scope is not getting injected then I addded a dependency of $scope in the array to the 'app' module like this :-

angular.module('app', [$scope])

but to no avail. But what worked was the following code:-

 <!DOCTYPE html>
 <html>
  <head>
    <title>Angular JS Controllers</title>
  </head>   
  <body>
    <div ng-app="app">
      <h1>Controllers</h1>
       <div ng-controller="MainCtrl as ctrl">
         <p>{{ctrl.message}}</p>
       </div> 
     </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
    <script type="text/javascript">
      angular.module('app', [])
         .controller('MainCtrl', [function(){
           this.message = "Hello";
         }]);
    </script>
   </body>
  </html>

I am referring the message model in HTML using ctrl.messaage, only then its appearing not otherwise.But why!!

Why can't I use $scope here, if I can how!! / Basically what is the difference between this and the earlier code?

Upvotes: 0

Views: 186

Answers (4)

Ben
Ben

Reputation: 2706

You need to add quotes around $scope when you're injecting it into your controller. AngularJS will look at these string variables to determine what it needs to safely inject into your application.

angular.module('app', [])
    .controller('MainCtrl', ['$scope', function($scope){
        $scope.message = "Hello";
}]);

Upvotes: 2

Muhammed Neswine
Muhammed Neswine

Reputation: 2047

Try something like this

angular.module('app', [])
     .controller('MainCtrl', ['$scope', function($scope){
       $scope.message = "Hello";
     }]);

Upvotes: 3

Teemoh
Teemoh

Reputation: 342

When using an array as the second argument of the controller-method you have to use strings as values. This allows you to rename dependency modules.

    <script type="text/javascript">
      angular.module('app', [])
         .controller('MainCtrl', ["$scope", function($scope){
           $scope.message = "Hello";
         }]);
    </script>

Upvotes: 2

Hadi
Hadi

Reputation: 17299

it shoulde be like this. 

angular.module('app', [])
     .controller('MainCtrl', ["$scope", function($scope){
       $scope.message = "Hello";
     }]);

and it's better use controllerAs syntax

angular.module('app', [])
     .controller('MainCtrl', ["$scope", function($scope){
      var vm = this;
       vm.message = "Hello";
     }]);

and in view use 

  <div ng-controller="MainCtrl as ctrl">

Upvotes: 2

Related Questions