Question

我无法找到以下代码的问题。我从来没有在html文件中编写控制器。我这样做是出于测试目的。

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>AngularJs</title>
</head>

<body ng-controller="sampleController">
<div>
<h2>Adding a sample controller</h2>
    <ul>
        <li ng-repeat="cust in customers">
            {{cust.name}} - {{cust.city}}
        </li>
    </ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
    function sampleController($scope) {
        $scope.customers = [
            {name:'Smith', city:'New York'},
            {name:'Alen', city:'Atlanta'},
            {name:'Dan', city:'California'},
            {name:'Thomas', city:'Phoenix'}
        ];
    }
</script>
</body>
</html>

提前致谢。

Answer 1

您应该创建一个应用程序并通过该应用程序定义您的控制器：

<html ng-app="sampleApp">
...
<script type="text/javascript">
  var sampleApp = angular.module("sampleApp", []);
  sampleApp.controller("sampleController", function($scope) {
     $scope.customers = [
         {name:'Smith', city:'New York'},
         {name:'Alen', city:'Atlanta'},
         {name:'Dan', city:'California'},
         {name:'Thomas', city:'Phoenix'}
     ];
  });
</script>
...

Answer 2

对于全局控件的支持已从角度1.3中删除，如果您使用版本直到1.2，它应该可以工作，请参阅此工作Fiddle

var myApp = angular.module('myApp',[]);

  function sampleController($scope) {
        $scope.customers = [
            {name:'Smith', city:'New York'},
            {name:'Alen', city:'Atlanta'},
            {name:'Dan', city:'California'},
            {name:'Thomas', city:'Phoenix'}
        ];
    }

<小时/> 如果您使用的是角度1.3，则全局控制器不起作用，请参见角度为1.3的fiddle

如果您需要使用角度版本1.3，请使用以下代码：

var myApp = angular.module('myApp',[]);

  myApp.controller('sampleController',function($scope) {
        $scope.customers = [
            {name:'Smith', city:'New York'},
            {name:'Alen', city:'Atlanta'},
            {name:'Dan', city:'California'},
            {name:'Thomas', city:'Phoenix'}
        ];
    })

请参阅此Fiddle

Answer 3

最好以声明方式声明应用和控制器。

下一个代码有效：

<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>AngularJs</title>
</head>

<body ng-controller="SampleController">
<div>
<h2>Adding a sample controller</h2>
    <ul>
        <li ng-repeat="cust in customers">
            {{cust.name}} - {{cust.city}}
        </li>
    </ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">

    var app= angular.module('MyApp',[]);
    app.controller('SampleController',  function ($scope) {
        $scope.customers = [
            {name:'Smith', city:'New York'},
            {name:'Alen', city:'Atlanta'},
            {name:'Dan', city:'California'},
            {name:'Thomas', city:'Phoenix'}
        ];
      }
    );
</script>

</body>
</html>

Answer 4

可以使用发布的答案。

在这两种用法中，推荐的方法是注入$ scope并使用它（而不是使用它，你也可以在第二种方法中使用它。）

方法一和二之间的区别在于如何支持缩小。在前者中，您可以提供一组注入的参数，而在后者中您可以修改$ inject。这当然有点技术性，但强烈建议支持缩小。请参阅文档中关于缩小的注释。

前者也没有在全局范围内命名函数，这通常是一件好事！

Controller未在AngularJs中执行

4 个答案: