Question

我正在学习Angularjs。我已经开始使用http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf

了

大多数教程示例都被罚款，直到我遇到以下代码：

<html>
    <head>
    </head>
<body data-ng-app=''>   
<div data-ng-controller="simpleController" >
<ul>
  <li data-ng-repeat="x in names">
    {{ x.name}}
  </li>
</ul>
<script src='angular.min.js'></script>
<script>
function simpleController($scope){      
    $scope.names = [ 
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
        ];
}
</script>
</div>

    </body>
</html>

Answer 1

您正在使用控制器而不创建模块。您必须在处理控制器之前创建模块。

在旧版本的Angular JS（＆lt; 1.3）中，您可以创建一个没有模块的控制器。但在以后的版本中，这是不可能的。

请查看以下代码

<!DOCTYPE html>
<html>  
  <head>
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15">      </script>
  </head>

  <body data-ng-app='myapp'>
    <div data-ng-controller="simpleController">
     <ul>
      <li data-ng-repeat="x in names">{{ x.name}}</li>
     </ul>
   </div>

<script>
var app = angular.module('myapp', [])
 app.controller('simpleController', function($scope) {
  $scope.names = [{
    name: 'Jani',
    country: 'Norway'
  }, {
    name: 'Hege',
    country: 'Sweden'
  }, {
    name: 'Kai',
    country: 'Denmark'
  }];

});
</script>
</body>

</html>

OR

<!DOCTYPE html>
<html>    
  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  </head>

 <body ng-app='myapp'>
  <ul ng-controller='simpleController'>
    <li ng-repeat='x in names'>{{x}}</li>
  </ul>

 <script>
  function simpleController($scope) {
    $scope.names = [{
      name: 'Jani',
      country: 'Norway'
    }, {
      name: 'Hege',
      country: 'Sweden'
    }, {
      name: 'Kai',
      country: 'Denmark'
    }];
  }

  simpleController.$inject = ['$scope'];
  angular.module('myapp', []).controller('simpleController', simpleController)
  </script>

Answer 2

更好的方法是为控制器

创建controllers.js

<html ng-app='myapp'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div data-ng-controller="simpleController" >
  <ul>
    <li data-ng-repeat="x in names">
      {{ x.name}}
    </li>
  </ul>
</div>
</body>
</html>

controllers.js中的逻辑应该是模块：

var app = angular.module('myapp', [])
 app.controller('simpleController', function($scope) {
  $scope.names = [{
    name: 'Jani',
    country: 'Norway'
  }, {
    name: 'Hege',
    country: 'Sweden'
  }, {
    name: 'Kai',
    country: 'Denmark'
  }];

});

Answer 3

问题是您使用的是 Angular 1.3 +

您的代码将使用较低版本的角度（小于1.3），因为您正在使用全局函数声明，＆amp;默认情况下，角度1.3中禁用全局函数声明。

如果要使代码正常工作，则需要在初始化角度时启用全局控制器函数声明。

<强>配置

app.config($controllerProvider) {
  // Don't do this unless you *have* to
  $controllerProvider.allowGlobals();
});

但是这不是使用全局函数的好习惯，你应该使用模块化方法作为angular使用它来分离出代码。然后在ng-app指令ng-app="app"中提及模块名称。angular.module('app', []) .controller('simpleController',simpleController) function simpleController($scope) { $scope.names = [{ name: 'Jani', country: 'Norway' }, { name: 'Hege', country: 'Sweden' }, { name: 'Kai', country: 'Denmark' }]; }

<强>代码

<body data-ng-app=''>
    <div data-ng-controller="simpleController">
        <ul>
            <li data-ng-repeat="x in names">
                {{ x.name}}
            </li>
        </ul>
    </div>
</body>

<强> HTML

{{1}}

Angularjs代码的HTML文件空白

3 个答案: