了解AngularJS中控制器的基础知识
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了了解AngularJS中控制器的基础知识相关的知识，希望对你有一定的参考价值。
我仍然非常基本使用AngularJS（和一般老实说编程。在线观看了一些视频，我试图通过下面的例子来理解控制器概念（例如传递一个数组，然后用ng-repeat迭代它）过去一小时已经过去了，它没有控制器（例如数组），但是在单独的脚本中添加数组时没有。任何人都可以帮助我在逻辑中找到我的错误 - 它实际上是相同的视频，但我看不到错误（甚至是错字）并觉得这是如此根本，我应该有这个工作，然后继续下一步。
非常感谢您的任何帮助：
<html ng-app>
<head><title>My First Page</title></head>
<body >
<div class="container" ng-controller="SimpleController">
Name:
<br />
<input type="text" ng-model="name" />
<br />
<ul>
<li ng-repeat="cust in customers"> {{ cust.name }} </li>
</ul>
</div>
<script src="script/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [
{ name: 'Simon', lastname: 'Test' },
{ name: 'Thomas', lastname: 'Testi' },
{ name: 'Adi', lastname: 'Testo' },
{ name: 'Adrian', lastname: 'Testo' },
{ name: 'Tomeli', lastname: 'Testi' }
];
}
</script>
</body>
</html>
答案
您正在使用具有角度1.1版本的控制器的全局声明。如果您使用的版本高于1.3，您应该如下声明控制器，
var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.customers = [
{ name: 'Simon', lastname: 'Test' },
{ name: 'Thomas', lastname: 'Testi' },
{ name: 'Adi', lastname: 'Testo' },
{ name: 'Adrian', lastname: 'Testo' },
{ name: 'Tomeli', lastname: 'Testi' }
];
});
DEMO
var app = angular.module('testApp',[]);
app.controller('SimpleController',function($scope){
$scope.customers = [
{ name: 'Simon', lastname: 'Test' },
{ name: 'Thomas', lastname: 'Testi' },
{ name: 'Adi', lastname: 'Testo' },
{ name: 'Adrian', lastname: 'Testo' },
{ name: 'Tomeli', lastname: 'Testi' }
];
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp">
<div class="container" ng-controller="SimpleController">
Name:
<br />
<input type="text" ng-model="name" />
<br />
<ul>
<li ng-repeat="cust in customers"> {{ cust.name }} </li>
</ul>
</div>
</body>以上是关于了解AngularJS中控制器的基础知识的主要内容，如果未能解决你的问题，请参考以下文章