Question

我试图按照教程进行操作，但此代码对我不起作用。有人可以解释为什么以及如何解决它？我认为它与ng-controller有关，但不确定原因。

<!doctype html>

<html ng-app>
<head>
<title>AngularJS 2</title>
<script src="angular.min.js"></script>
</head>

<body ng-controller="MyController">
	<h1>{{author.name}}</h1>
	<p>{{ author.title + ', ' + author.company }}</p>

<script>
function MyController($scope) {
		$scope.author = {
			'name' : 'Ray Villa',
			'title' : 'Staff Author',
			'company' : 'boss`enter code here`.com'
	}
}
</script>

</body>
</html>

Answer 1

您的代码不适用于角度1.3+，因为您将控制器定义为全局函数。

来自AngularJS文档：

从1.2迁移到1.3

<强> 控制器

由于3f2232b5，$ controller将不再在窗口中查找控制器。查看控制器窗口的旧行为最初打算用于示例，演示和玩具应用程序。我们发现允许全局控制器功能鼓励不良做法，因此我们决定默认禁用此行为。

要迁移，请使用模块注册控制器，而不是将它们公开为全局变量改为如下定义控制器：

<html ng-app="myApp">
<head>
  <title>AngularJS 2</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body ng-controller="MyController">
  <h1>{{author.name}}</h1>
  <p>{{ author.title + ', ' + author.company }}</p>

  <script>
    angular.module('myApp', []);

    angular.module('myApp').controller('MyController', function ($scope) {
      $scope.author = {
        'name': 'Ray Villa',
        'title': 'Staff Author',
        'company': 'boss`enter code here`.com'
      }
    });
  </script>

</body>

</html>

Answer 2

你错过了函数定义的右大括号。

Answer 3

您缺少Angular背景。

您的应用程序需要一个模块，因此您需要编写ng-app="myApp"并使用该模块注册您的控制器功能。

function MyController($scope) { /* ... */ }

angular.module('myApp, []).controller('MyController', MyController);

这将告诉Angular引导您的（myApp）应用程序并注册该特定控制器。

为什么ng-controller不能用于此示例？

3 个答案: