ngroute工作但控制器不工作

问题描述:

ngRoute工作,但我无法在视图中显示模型。 它似乎没有正确检测到控制器。 当我运行这个例子,我得到了下面的结果。 首先用户: 用户名:{{user.username}} 评价:{{user.rating}}ngroute工作但控制器不工作

/* file user.js*/ 
 
var app= angular.module('userApp',['ngRoute']); 
 

 
app.controller('userListController', function($scope){  
 

 
    $scope.users=[ 
 
\t { 
 
\t  "username": "Bryant", 
 
\t  "rating": 37 
 
\t }, 
 
\t { 
 
\t  "username": "Wells", 
 
\t  "rating": 1 
 
\t }, 
 
\t { 
 
\t  "username": "Sims", 
 
\t  "rating": 4 
 
\t }, 
 
\t { 
 
\t  "username": "Blankenship", 
 
\t  "rating": 37 
 
\t }, 
 
\t { 
 
\t  "username": "Simon", 
 
\t  "rating": 11 
 
\t }, 
 
\t { 
 
\t  "username": "Reyes", 
 
\t  "rating": 9 
 
\t }, 
 
\t { 
 
\t  "username": "Malone", 
 
\t  "rating": 17 
 
\t }, 
 
\t { 
 
\t  "username": "Evans", 
 
\t  "rating": 25 
 
\t }, 
 
\t { 
 
\t  "username": "Keller", 
 
\t  "rating": 32 
 
\t } 
 
    ]; 
 

 

 
}); 
 

 
app.config(function($routeProvider){ 
 
    
 
    $routeProvider.when('/', {templateUrl: '/home.html'}).when('/members', {templateUrl: '/members.html',controller:'userListController'}).otherwise({redirectTo : '/'}); 
 

 
});
<!--file mermbers.html --> 
 
<ul> 
 
    <li ng-repeat="user in users"> First user : 
 
     <ul> 
 
\t  <li> username: {{ user.username }}</li> 
 
\t  <li>rating :{{ user.rating }}</li> 
 
     </ul> 
 
    </li> 
 
</ul> 
 

 
<!-- file index.html--> 
 

 
<!doctype html> 
 
<html ng-app="userApp"> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
     <script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script> 
 
     <script src="user.js"></script> 
 
    
 

 
    </head> 
 
    <body ng-app="userApp"> 
 

 
    
 
    
 
     <div ng-view></div> 
 
    </body> 
 
</html>

+0

这样的输出对于应用程序的灾难性故障是典型的。控制台日志说什么? –

+0

顺便说一句,检查这一个。我已经把你的代码放到了缓冲区,并修改了它来显示根目录下的成员视图。它有点有用。所以控制器很好。 [plunker demo](https://plnkr.co/edit/1eVJxGNle53fs4ebU5Ag?p=preview) –

+0

谢谢vladimir,我的控制台没有显示任何错误,我找不到问题 – midy62

您声明ng-app="userApp"两次(在HTML和BODY)。 也许您需要在BODY中声明ng-controller="userListController"

检查控制台输出在加载页面时搜索错误。

+0

是的我复制了ng-app,但是删除重复的ng-app没有解决我的问题,ng-controller的声明被设置为路线提供者:.. when('/ members',{templateUrl:'/members.html',controller:'userListController'})。最后我在控制台中看不到任何错误 – midy62