控制器未在AngularJs中执行_Angularjs

控制器未在AngularJs中执行

angularjs

控制器未在AngularJs中执行,angularjs,Angularjs,我无法找出以下代码的问题。我从未在html文件中编写过控制器。我这样做是为了测试 <!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title>AngularJs</title> </head> <body ng-controller="sampleController"> <div> <h2>Addin

我无法找出以下代码的问题。我从未在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>

提前感谢。

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

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

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

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

angular 1.3中删除了对全局控件的支持，如果您使用的是1.2版之前的版本，它应该可以工作，请参阅此工作

如果您使用的是angular 1.3，则全局控制器不应工作，请参见angular 1.3

如果需要使用angular 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'}
        ];
    })

参见此

angular 1.3中删除了对全局控件的支持，如果您使用的是1.2版之前的版本，它应该可以工作，参见此工作

如果您使用的是angular 1.3，则全局控制器不应工作，请参见angular 1.3

如果需要使用angular 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'}
        ];
    })

见此

张贴的两个答案都可以使用

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

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

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

发布的两个答案都可以使用

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

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

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

下一个代码起作用：

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

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

下一个代码起作用：

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

您使用的是哪个版本的angular如果您使用的是angular 1.2以上的新版本+您使用的是哪个版本的angular不要使用全局控制器如果您使用的是angular 1.2以上的新版本不要使用全局控制器+