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

问题描述 投票:0回答:1

我仍然非常基本使用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>
angularjs angularjs-scope
1个回答
0
投票

您正在使用具有角度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>
© www.soinside.com 2019 - 2024. All rights reserved.