Question

我正在使用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>

提供错误 ReferenceError：$ 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，如果我可以怎么做!! / 基本上这与前面的代码有什么区别？

Answer 1

尝试这样的事情

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

Answer 2

它应该是这样的。

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

Answer 3

使用数组作为controller-method的第二个参数时，必须使用字符串作为值。这允许您重命名依赖模块。

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

Answer 4

当您将$scope注入控制器时，需要在angular.module('app', []) .controller('MainCtrl', ['$scope', function($scope){ $scope.message = "Hello"; }]);附近添加引号。 AngularJS将查看这些字符串变量，以确定安全注入应用程序所需的内容。

compile files('./libs/woogeenconference.jar')

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

4 个答案: