2017-05-26 54 views
0

我一直在练习AngularJS和Angular Material。并且我遵循了使用ng-repeat的教程。我试图自己做,但我似乎无法让它工作。我没有任何控制台错误。我没有看到可能会丢失什么,所以我可能会错过Angular中的一个重要概念。感谢您的帮助!无法重复ng-

Plunker:http://plnkr.co/edit/31WaRmH5RRdW5TFEFbg2

HTML

<html lang="en" ng-app="myApp"> 
<head> 
<meta charset="utf-8"> 
<title>Angular Material</title> 
<link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/v0.8.3/angular-material.css" /> 
<script src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script> 
<script src="https://code.angularjs.org/1.3.15/angular-animate.js"></script> 
<script src="https://code.angularjs.org/1.3.15/angular-aria.js"></script> 
<script src="https://code.angularjs.org/1.3.15/angular-route.js"></script> 
<script src="https://cdn.rawgit.com/angular/bower-material/v0.8.3/angular-material.js"></script> 
<!-- ICON SET --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js"></script> 

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

</head> 

<body> 

    <md-list flex> 

     <md-item ng-repeat="artist in artists"> 
     <a> 
     <md-item-content md-ink-ripple layout="row" layout-align="start center"> 
      <div class="inset">{{ artist.name }} 
      </div> 
     </md-item-content> 
     </a> 
    </md-item> 
</md-list> 

</body> 
</html> 

app.js

var myApp = angular.module('myApp', [ 
           'ngMaterial', 
           'ngRoute', 
           'ngMdIcons', 
           'artistControllers' 
           ]); 

controllers.js

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

artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http){ 
    $http.get('data.json').success(function(data){ 
     $scope.artists = data; 
    }); 
}]); 
+0

当你需要使用的元素之一指定控制器['NG-controller'](不使用任何路由https://docs.angularjs.org/api/ng/directive/ngController) – George

+0

这也是一个非常有用的评论。我原本是试图从我使用的教程之一使用路由,这是行不通的。所以我从头开始研究这个问题,并在此期间留下路由。现在我明白了为什么我的路由不能在另一个测试中工作。谢谢! – user5854648

+0

当你使用路由时,你通常不需要指定ng-controller标签,相反,你需要[ng-view](https://docs.angularjs.org/api/ngRoute/directive/ngView)if你看看那个页面上的例子可能有帮助☺ – George

回答

2

您错过了要包含在元素中的ng-controller

<md-list flex ng-controller="ListController"> 

Plunker

+1

啊,我很生气!谢谢! – user5854648

+0

不客气。愚蠢的错误有时会吃一天。哈哈:P –

1

你缺少ng-controller

<body ng-controller="ListController"> 
</body>