为什么$scope未在以下代码中定义

我正在使用Angular 1.x，这是给出错误的代码：-

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

它给出了错误引用错误：未定义$scope

我认为可能是$scope没有被注入，然后我在数组中添加了$scope依赖项到"app"模块，如下所示：-

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

但无济于事。但有效的是以下代码：

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

我使用 ctrl.messaage 在 HTML 中引用消息模型，然后它才会出现，而不是其他方式。但是为什么！！

为什么我不能在这里使用$scope，如果可以的话！！/基本上，这和早期的代码有什么区别？

试试这样的事情

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

它应该是这样的。

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

最好使用语法controllerAs

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

和视图使用

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

当使用数组作为控制器方法的第二个参数时，您必须使用字符串作为值。这允许您重命名依赖项模块。

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

当您将其注入控制器时，您需要在$scope周围添加引号。AngularJS将查看这些字符串变量，以确定它需要安全地注入到您的应用程序中。

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

相关内容

最新更新

热门标签：