Question

以下是Angular教程的代码片段，而不是在html标记中调用ng-app指令，创建一个span标记并在那里调用它。为什么javascript中的UL列表没有显示？谢谢你的帮助!!

＆＃13;

var phonecatApp = angular.module('phoneCatApp', []);
phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
    $scope.phones = [{
        name: 'Nexus S',
        snippet: 'Fast just got faster with Nexus S.'
    }, {
        name: 'Motorola XOOM™ with Wi-Fi',
        snippet: 'The Next, Next Generation tablet.'
    }, {
        name: 'MOTOROLA XOOM™',
        snippet: 'The Next, Next Generation tablet.'
    }
    ];
});

＆＃13;

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>My HTML File</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<span ng-app="phoneCatApp">
<body ng-controller="PhoneListController">
<p>Nothing here {{'yet' + '!'}}</p>

<p>1 + 2 = {{1 + 2}}</p>
<ul>
    <li ng-repeat="phone in phones">
        <span>
            {{phone.name}}</span>

        <p>{{phone.snippet}}</p>

    </li>
</ul>

</body>
    </span>
</html>

＆＃13;

Answer 1

我认为HTML不喜欢<span>之外的<body>

＆＃13;

var phonecatApp = angular.module('phoneCatApp', []);
phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
  $scope.phones = [{
    name: 'Nexus S',
    snippet: 'Fast just got faster with Nexus S.'
  }, {
    name: 'Motorola XOOM™ with Wi-Fi',
    snippet: 'The Next, Next Generation tablet.'
  }, {
    name: 'MOTOROLA XOOM™',
    snippet: 'The Next, Next Generation tablet.'
  }];
});

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-app="phoneCatApp" ng-controller="PhoneListController">
  <p>Nothing here {{'yet' + '!'}}</p>

  <p>1 + 2 = {{1 + 2}}</p>
  <ul>
    <li ng-repeat="phone in phones">
      <span>{{phone.name}}</span>
      <p>{{phone.snippet}}</p>
    </li>
  </ul>
</body>
</html>

＆＃13;

角度样本跟进

1 个答案: