我是Angularjs的新人。我想在登录后显示客户列表。登录后，我获得了我想要保存在cookie中的访问令牌。当我使用console.log(data)时，数据即将到来，但在视图页面中，它将变为空白。
的index.html
<html lang="en" ng-app="customersApp">
<head>
<link rel="shortcut icon" href="img/favicon.html">
<title>Vizavoo</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<!--external css-->
<link href="css/slidebars.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
</head>
<body>
<div ng-view></div>
<!-- js placed at the end of the document so the pages load faster -->
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/loginController.js"> </script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
<!-- Mirrored from thevectorlab.net/flatlab/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 08 Dec 2014 06:09:06 GMT -->
</html>
app.js
(function(window){
var app= angular.module('customersApp',['ngRoute','ngCookies']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
controller: 'loginController',
templateUrl: 'app/views/loginuser.html'
})
.when('/logout', {
title: 'Logout',
templateUrl: 'partials/login.html',
controller: 'loginController'
})
.when('/dashboard', {
title: 'Dashboard',
templateUrl: 'app/views/dynamic_table.html',
controller: 'dashboard'
})
.when('/signup', {
title: 'Signup',
templateUrl: 'app/views/registration.html',
controller: 'loginController'
})
.otherwise({
redirectTo: '/login'
});
}]);
window.app = app;
}(window));
loginController.js
app.controller('loginController', function ($scope,$http,$cookies,$cookieStore) {
//initially set those objects to null to avoid undefined error
$scope.login = {};
$scope.signup = {};
$scope.doLogin = function (customer) {
$.post("http://54.173.65.120:2500/admin_login",
{
user_email : $scope.login.email,
password : $scope.login.password
},
function(data,status){
data = JSON.parse(data);
console.log(data);
//var accessToken = data.access_token;
var someSessionObj = { 'accesstoken' : data.access_token};
//console.log(someSessionObj);
$cookies.dotobject = someSessionObj;
$scope.usingCookies = { 'cookies.dotobject' : $cookies.dotobject, "cookieStore.get" : $cookieStore.get('dotobject') };
$cookieStore.put('obj', someSessionObj);
$scope.usingCookieStore = { "cookieStore.get" : $cookieStore.get('obj'), 'cookies.dotobject' : $cookies.obj, };
console.log($cookieStore.get('obj').accesstoken);
if(data.flag==10)
{
alert(data.error);
}
else
{
window.location.href = "#/dashboard";
}
});
};
$scope.logout = function () {
Data.get('logout').then(function (results) {
Data.toast(results);
$location.path('login');
});
}
$scope.toggle = true;
$scope.$watch('toggle', function(){
$scope.toggleText = $scope.toggle ? 'Unblock' : 'Block';
$scope.buttonStyle=$scope.toggle ? 'success' : 'danger';
})
});
app.controller('dashboard', function ($scope,$http,$cookies,$cookieStore) {
var d = new Date()
var n = d.getTimezoneOffset();
console.log("in dash board");
$.post('http://54.173.65.120:2500/customer_list',{
access_token : $cookieStore.get('obj').accesstoken
},function(data){
console.log("hiiiii");
console.log(data);
var dataArray = [];
// console.log(data["aaData"]);
// console.log(data["aaData"].length);
data = JSON.parse(data);
data.forEach(function(column){
var d = {
user_id: "" ,
user_name: "" ,
email: "",
mobile: "",
created_at: "",
is_block: "",
};
d.user_id = column.user_id;
d.user_name = column.first_name+" "+column.last_name;
d.email = column.email;
d.mobile = column.mobile;
d.created_at = column.created_at;
d.is_block = column.is_block;
console.log(d)
dataArray.push(d);
});
console.log(data);
$scope.list = data;
$scope.currentPage = 1; //current page
$scope.entryLimit = 5; //max no of items to display in a page
$scope.filteredItems = $scope.list.length; //Initially for no filter
$scope.totalItems = $scope.list.length;
});
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
});
app.filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
dynamic_table.html
<!--common script for all pages-->
<section id="container" class="">
<!--header start-->
<header class="header white-bg">
<div class="sidebar-toggle-box">
<div data-original-title="Toggle Navigation" data-placement="right" class="fa fa-bars tooltips"></div>
</div>
<!--logo start-->
<a href="#/dashboard" class="logo" >Viza<span>Voo</span></a>
<div class="top-nav ">
<ul class="nav pull-right top-menu">
<!-- <li>
<input type="text" class="form-control search" placeholder="Search">
</li>-->
<!-- user login dropdown start-->
<li><a href="#/login"><i class="fa fa-key"></i> Log Out</a></li>
<!-- user login dropdown end -->
<!-- <li class="sb-toggle-right">
<i class="fa fa-align-right"></i>
</li>-->
</ul>
</div>
</header>
<!--header end-->
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<li>
<a href="#/dashboard">
<i class="fa fa-users"></i>
<span>Customers</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-user"></i>
<span>Artists</span>
</a>
<ul class="sub">
<li><a href="general.html">Verified</a></li>
<li><a href="buttons.html">New Requests</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-cogs"></i>
<span>Services</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" >
<i class="fa fa-dot-circle-o"></i>
<span>Sessions</span>
</a>
<ul class="sub">
<li><a href="form_component.html">Upcoming</a></li>
<li><a href="advanced_form_components.html">Past</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-bar-chart-o"></i>
<span>Reports</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" >
<i class="fa fa-credit-card"></i>
<span>Payment</span>
</a>
</li>
</ul>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end-->
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<!-- page start-->
<div class="row" ng-controller="dashboard">
<div class="col-sm-12">
<section class="panel">
<div class="breadcrumbs">Home > <b>Customers</b></div>
<header class="panel-heading">
Customers Table
</header>
<div class="row" style="margin: 5px 0 0 0;">
<div class="col-md-2">
<select ng-model="entryLimit" class="form-control">
<option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div class="col-md-3" style="float:right;">
<input type="text" ng-model="search" ng-change="filter()" placeholder="Search" class="form-control" />
</div>
</div>
<div class="panel-body">
<div class="adv-table">
<table class="display table table-bordered table-striped" id="dynamic-table">
<thead>
<tr>
<th ng-click="sort_by('user_id')">S.No</th>
<th ng-click="sort_by('user_name')">Name</th>
<th ng-click="sort_by('mobile')">Phone No.</th>
<th ng-click="sort_by('email')">Email ID</th>
<th ng-click="sort_by('created_at')">Registration Date</th>
<th ng-click="sort_by('is_block')">Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit" class="gradeX" >
<td>{{data.user_id}}</td>
<td>{{data.user_name}}</td>
<td>{{data.mobile}}</td>
<td>{{data.email}}</td>
<td>{{data.created_at}}</td>
<td>{{data.is_block}}</td>
<!-- <button type="button" class="btn btn-{{buttonStyle}}" ng-click="toggle = !toggle">{{toggleText}}</button>-->
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
</div>
<!-- page end-->
</section>
</section>
<footer class="site-footer">
<div class="text-center">
2013 © FlatLab by VectorLab.
<a href="#" class="go-top">
<i class="fa fa-angle-up"></i>
</a>
</div>
</footer>
<!--footer end-->
</section>
我在哪里犯了错误？为什么数据没有显示在视图部分？
答案 0 :(得分：1)
您需要在app.js ...
中包含angular-cookie.js作为模块依赖项
var app= angular.module('customersApp',['ngRoute','ngCookies']);
答案 1 :(得分：0)
你错过了对ngCookies的依赖：
var app= angular.module('customersApp',['ngRoute', 'ngCookies']);
我建议使用其他风格指南。它将比您当前的代码更简洁。请在此处查看：https://github.com/johnpapa/angularjs-styleguide