2016-07-13 5 views
0

Hier ist das Code-Snippet von Angular tutorial, anstatt die ng-app-Anweisung im html-Tag aufzurufen, erstelle ein span-Tag und rufe es dort an. Warum erscheint die UL-Liste im Javascript nicht? Danke für Ihre Hilfe!!Angular sample follow

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.' 
 
    } 
 
    ]; 
 
});
<!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>

+0

Wrap 'span' und' P' innen 'div' und Verwendung mag' ng-repeat' in div – uzaif

Antwort

1

Ich denke HTML nicht <span> außerhalb <body>

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.' 
 
    }]; 
 
});
<!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>

+0

ja, m ur richtig, wenn ich Stellen Sie die Spannweite im Körper ein, es funktioniert. Wie kommt es, dass andere Winkel-Direktiven funktionieren und nicht ng-repeat, wenn span außerhalb des body-Tags ist, danke –

+0

Ich bin mir nicht wirklich sicher, aber du solltest die Spannweite sowieso nicht außerhalb des Körpers setzen. – Icycool