Question

我是棱角分明的新人。到目前为止，代码工作正常，但是当我使用ng-app =“demoApp”或任何其他app指令时它似乎停止工作。它无法绑定到控制器上。这是我的观点：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>Learn AngularJS->Binding on the Controllers</title>  

</head>

<body>

<div class="container" ng-app="demoApp" data-ng-controller="simpleController">
<h3>Adding a simple Controller</h3>

<ul>

<li data-ng-repeat="cust in customers"> 
{{cust.name}} - {{cust.city}}

</li>

</ul>

</div>

这是我的js / controller / simpleController.js

 var app = angular.module('demoApp',[]);
   var app = angular.module('demoApp',[]);
app.controller('simpleController',function($scope)
{
$scope.customers=[
{name:'John Smith',{city:'Kitale'},
{name:'Jane Martins',{city:'Bungoma'},
{name:'Esther Williams',{city:'Busia'},
{name:'James Anthony',{city:'Nakuru'},
{name:'Irine seniorman',{city:'Eldoret'},
{name:'Agrey Ngoya',{city:'Kitui'},
{name:'Anne Chemos',{city:'Bomet'},
{name:'Zacheous Waweru',{city:'Murang\'a'}

];

});
<script type="text/javascript" src="../js/angular-1.5.0/angular.min.js"></script>

<script type="text/javascript" src="../js/controller/simpleController.js"></script>

这是我在上面的视图中指出的包含ng-app = demoApp“指令后在浏览器中获得的内容：

Adding a simple Controller

{{cust.name}} - {{cust.city}}

但是当我删除ng-app =“demoApp”时，其他代码工作正常。我不明白的是ng-app指令对我不起作用。其他指令工作正常，但也停止工作app指令在代码中的任何地方使用。我已经检查过以确保app指令在代码中没有使用两次但完全没有成功。请帮忙，我可能会出错。我找不到任何错误。

Answer 1

您的客户阵列副本中存在一些错误，请粘贴以下代码并再次尝试。

HTML

<body ng-app="demoApp">
    <div class="container" ng-controller="simpleController">
      <h3>Adding a simple Controller</h3>

      <ul>

      <li data-ng-repeat="cust in customers"> 
      {{cust.name}} - {{cust.city}}

      </li>

      </ul>

    </div>
  </body>

Controller.js

var app = angular.module('demoApp',[]);

app.controller('simpleController',['$scope', function($scope){
  $scope.customers=[
    {name:'John Smith',city:'Kitale'},
    {name:'Jane Martins',city:'Bungoma'},
    {name:'Esther Williams',city:'Busia'},
    {name:'James Anthony',city:'Nakuru'},
    {name:'Irine seniorman',city:'Eldoret'},
    {name:'Agrey Ngoya',city:'Kitui'},
    {name:'Anne Chemos',city:'Bomet'},
    {name:'Zacheous Waweru',city:'Murang\'a'}
  ];
}]);

Answer 2

您的数组定义错误。

否： {name:'John Smith',{city:'Kitale'}
是： {name:'John Smith',city:'Kitale'}

以下是正在使用的Plunker： http://plnkr.co/edit/hC3iY8HUG23N7DjIS2hP?p=preview

所以，您的整体代码：

<!DOCTYPE html>
<html>

<head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body>
    <div class="container" ng-app="demoApp" data-ng-controller="simpleController">
        <h3>Adding a simple Controller</h3>
        <ul>
            <li data-ng-repeat="cust in customers">
                {{cust.name}} - {{cust.city}}
            </li>
        </ul>

    </div>
    <script>
        var app = angular.module('demoApp', []);
        app.controller('simpleController', function($scope) {
            $scope.customers = [{
                    name: 'John Smith',
                    city: 'Kitale'
                }, {
                    name: 'Jane Martins',
                    city: 'Bungoma'
                }, {
                    name: 'Esther Williams',
                    city: 'Busia'
                }, {
                    name: 'James Anthony',
                    city: 'Nakuru'
                }, {
                    name: 'Irine seniorman',
                    city: 'Eldoret'
                }, {
                    name: 'Agrey Ngoya',
                    city: 'Kitui'
                }, {
                    name: 'Anne Chemos',
                    city: 'Bomet'
                }, {
                    name: 'Zacheous Waweru',
                    city: 'Murang\'a'
                }

            ];

        });
    </script>
</body>

</html>

angular ng-app =“demoApp”对我不起作用

2 个答案: