在 AngularJS 中了解控制器的基础知识

Question

我对 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>

Answer 1

您正在使用 angular 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' }
];
});

演示

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 中了解控制器的基础知识

Understanding basics of controller in AngularJS

angularjs

angularjs-scope