Question

我复制了an angular example from w3schools (here)，但它无效。我不明白为什么。它看起来应该工作正常。我做错了什么？

这是角度JS：

angular.module('myApp', []).controller('thingsCtrl', function($scope) {
    $scope.things = [
       {title: 'my title 1', content: 'my Content 1'},  
        title: 'my title 2', content: 'my Content 2'}, 
        title: 'my title 3', content: 'my Content 3'}, 
        title: 'my title 4', content: 'my Content 4'},  
        title: 'my title 5', content: 'my Content 5'},
        title: 'my title 6', content: 'my Content 6'}
        ];

    $scope.things2 = [
       {title: 'my 2nd title 1', content: 'my Content 1'},  
        title: 'my 2nd title 2', content: 'my Content 2'}, 
        title: 'my 2nd title 3', content: 'my Content 3'}, 
        title: 'my 2nd title 4', content: 'my Content 4'},  
        title: 'my 2nd title 5', content: 'my Content 5'},
        title: 'my 2nd title 6', content: 'my Content 6'}
        ];
});

这是HTML：

    <!DOCTYPE html>
<html>

  <head>

     <!-- CSS  -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">

    <!-- JS  -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

  </head>

<body>  

    <div ng-app="myApp" ng-controller="thingsCtrl">
        <h1>Hello Plunker!</h1>



      <div class="container">   
          <div class="row">

            <div class="col-sx-6"><h4>My Subtitle</h4>
                <div ng-repeat="x in things"> 
                    <div class="col-sx-6 col-sm-4 col-md-2">
                  <div class="cube">
                    <b>{{x.title}}</b> </br> {{x.content}}

                  </div>                
                    </div>  
                </div>
            </div>

            <div class="col-sx-6"><h4>My Subtitle</h4>
                <div ng-repeat="x in things2"> 
                    <div class="col-sx-6 col-sm-4 col-md-2">
                  <div class="cube">
                    <b>{{x.title}}</b> </br> {{x.content}}

                  </div>                
                    </div>  
                </div>
            </div>

          </div>
      </div> 

    </div>     

    <script src="script.js"></script>     

      </body>

    </html>

Answer 1

您在标记中指定了错误的控制器。更新

<div ng-app="myApp" ng-controller="myCtrl">

到

<div ng-app="myApp" ng-controller="thingsCtrl">

Answer 2

您没有为列表中的每个项目打开另一个键/值数组。

    {title: 'my title 2', content: 'my Content 2'}, 
    title: 'my title 3', content: 'my Content 3'},

尝试：

angular.module('myApp', []).controller('thingsCtrl', function($scope) {
    $scope.things = [
       {title: 'my title 1', content: 'my Content 1'},  
        {title: 'my title 2', content: 'my Content 2'}, 
        {title: 'my title 3', content: 'my Content 3'}, 
        {title: 'my title 4', content: 'my Content 4'},  
        {title: 'my title 5', content: 'my Content 5'},
        {title: 'my title 6', content: 'my Content 6'}
        ];

    $scope.things2 = [
       {title: 'my 2nd title 1', content: 'my Content 1'},  
       {title: 'my 2nd title 2', content: 'my Content 2'}, 
       {title: 'my 2nd title 3', content: 'my Content 3'}, 
       {title: 'my 2nd title 4', content: 'my Content 4'},  
       {title: 'my 2nd title 5', content: 'my Content 5'},
       {title: 'my 2nd title 6', content: 'my Content 6'}
        ];
});

哦，检查控制台错误：

Error: [ng:areq] Argument 'myCtrl' is not a function, got undefined

您的myApp控制器不正确。

Answer 3

我注意到你的对象数组语法不正确，在每个对象之前缺少一个大括号。

angular.module('myApp', []).controller('thingsCtrl', function($scope) {
  $scope.things = [
   {title: 'my title 1', content: 'my Content 1'},  
    {title: 'my title 2', content: 'my Content 2'}, 
    {title: 'my title 3', content: 'my Content 3'}, 
    {title: 'my title 4', content: 'my Content 4'},  
    {title: 'my title 5', content: 'my Content 5'},
    {title: 'my title 6', content: 'my Content 6'}
    ];

  $scope.things2 = [
   {title: 'my 2nd title 1', content: 'my Content 1'},  
    {title: 'my 2nd title 2', content: 'my Content 2'}, 
    {title: 'my 2nd title 3', content: 'my Content 3'}, 
    {title: 'my 2nd title 4', content: 'my Content 4'},  
    {title: 'my 2nd title 5', content: 'my Content 5'},
    {title: 'my 2nd title 6', content: 'my Content 6'}
    ];
});

Answer 4

您需要告诉依赖关系的角度顺序。你想要$scope注入，所以你提到角度。例如，如果我也要注入$q，我会将其添加到列表中.controller('thingsCtrl', ['$scope', '$q', function($scope, $q) { ... }]);以下代码应该可以正常工作

angular.module('myApp', [])
.controller('thingsCtrl', ['$scope', function($scope) {
    $scope.things = [
        {title: 'my title 1', content: 'my Content 1'},  
        {title: 'my title 2', content: 'my Content 2'}, 
        {title: 'my title 3', content: 'my Content 3'}, 
        {title: 'my title 4', content: 'my Content 4'},  
        {title: 'my title 5', content: 'my Content 5'},
        {title: 'my title 6', content: 'my Content 6'}
        ];

    $scope.things2 = [
        {title: 'my 2nd title 1', content: 'my Content 1'},  
        {title: 'my 2nd title 2', content: 'my Content 2'}, 
        {title: 'my 2nd title 3', content: 'my Content 3'}, 
        {title: 'my 2nd title 4', content: 'my Content 4'},  
        {title: 'my 2nd title 5', content: 'my Content 5'},
        {title: 'my 2nd title 6', content: 'my Content 6'}
        ];
}]);

简单的角度例子不起作用

4 个答案: