目前,我正在为数据库的管理控制台创建一个初始的AngularJs应用程序。我是Angular的新手,所以我开始修改phonecat教程。基本上,我有一个Jersey REST API,我需要在Angular中进行调用。 CORS不是问题,它们都在同一个Tomcat上运行。
数据结构是项目中包含组。
我可以从Login重定向到Projects列表页面,调用获取项目列表的控制器,我可以单击一个项目并获取详细信息页面并调用其控制器。但是当我点击项目详情页面中的链接并将其重定向到组列表页面时,从未进行REST api调用(根据Chrome的网络监视器。)
我很困惑,因为假设它应该与项目清单完全相同。
控制器:
phonecatControllers.controller('ProjectListCtrl', ['$scope', '$http',function($scope, $http){
$http.get('http://localhost:8080/WrappingServer/rest/api/project?show_hidden=true').success(function(data){
$scope.projects = data.hits.hits
});
$scope.orderprop='timeModified';
}]);
phonecatControllers.controller('GroupListCtrl', ['$scope', '$http',function($scope, $http){
$http.get('http://localhost:8080/WrappingServer/rest/api/group?projectID='+$scope.project._id+'&show_hidden=true').success(function(data){
$scope.groups = data.hits.hits //Yes this is correct. It's an elasticsearch cluster.
});
$scope.orderprop='timeModified';
}]);
phonecatControllers.controller('ProjectDetailCtrl', ['$scope', '$routeParams' ,'$http', function($scope, $routeParams, $http){
$http.get('http://localhost:8080/WrappingServer/rest/api/project/'+$routeParams.projectId).success(function(data){
$scope.project=data;
});
}]);
项目details.html:
<img ng-src="{{project._source.imageUrl}}" class="project">
<h1>{{project._source.name}}</h1>
<p>{{project._id}}</p>
<ul class="specs">
<a ng-href="#/groups" ng-click=>Group IDs</a>
<dd ng-repeat="group in project._source.groupIDs"><a href="#/projects/{{proj._id}}">{{proj._source.name}}</a>
{{group.groupID}}
</dd>
</ul>
基list.html
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderprop">
<option value="name">Alphabetical</option>
<option value="dateModified">Newest</option>
</select>
</div>
<div class="col-md-10">
<!--Body content-->
<ul class='groups'>
<li ng-repeat="group in groups | filter:query | orderBy:orderprop" class="thumbnail">
<a href="#/groups/{{group._id}}" class="thumb"><img ng-src=" {{group._source.imageUrl}}" alt="{{group._source.name}}"></a>
<a href="#/groups/{{group._id}}">{{group._source.name}}</a>
<p>{{group._source.timeModified}}</p>
</li>
</ul>
</div>
</div>
</div>
app.js
'use strict';
/* App Module */
var phonecatApp= angular.module('phonecatApp', [
'ngRoute', 'phonecatControllers', 'phonecatFilters']
);
phonecatApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.when('/projects',
{
templateUrl: 'partials/project-list.html',
controller: 'ProjectListCtrl'
}).when('/projects/:projectId', {
templateUrl: 'partials/project-detail.html',
controller: 'ProjectDetailCtrl'
}).when('/home', {
templateUrl: 'partials/login.html',
controller: 'LoginCtrl'
}).when('/groups',
{
templateUrl: 'partials/group-list.html',
controller: 'GroupListCtrl'
})
.otherwise({
redirectTo: '/home'
});
}]);
我甚至试图采用一种方法,其中projectID是一个routeParam(类似于Project详细信息),但仍然没有运气。
如果您还有其他任何事情可以回答我的问题,请告诉我。我知道它会变得如此简单,以至于我的额头上会出现一个手印。 (从我所见过的,可能是一个不应该出现的空间。)
谢谢!
答案 0 :(得分:1)
<a href="#/groups/{{group._id}}" class="thumb">
应为<a ng-href="/groups/{{group._id}}" class="thumb">
<a ng-href="#/groups" ng-click=>Group IDs</a
也不应该有空的ngClick。它应该看起来像<a ng-href="/groups">
。
所以基本上只需将链接的属性从href更改为ng-href,然后从链接中删除#符号。
答案 1 :(得分:1)
你有:
phonecatControllers.controller('GroupListCtrl', ['$scope', '$http',function($scope, $http){
$http.get('http://localhost:8080/WrappingServer/rest/api/group?projectID='+$scope.project._id+'&show_hidden=true').success(function(data){
$scope.groups = data.hits.hits //Yes this is correct. It's an elasticsearch cluster.
});
$scope.orderprop='timeModified';
}]);
我会在您的控制器中执行此操作:
phonecatControllers.controller('GroupListCtrl', ['$scope', '$http',function($scope, $http) {
$scope.function_name = function() {
$http.get('http://localhost:8080/WrappingServer/rest/api/group?projectID='+$scope.project._id+'&show_hidden=true').success(function(data){
$scope.groups = data.hits.hits //Yes this is correct. It's an elasticsearch cluster.
});
}
$scope.orderprop='timeModified';
}]);
对于控制器拥有的HTML元素内的链接,
<a ng-href="/groups" ng-click="function_name()">Group IDs</a>
实际上,你的AJAX电话只是坐在那里。您需要将其放在执行代码的块中,以便调用它,就像在任何其他情况下一样。在这种情况下,您必须将其放在一个函数中,该函数用作与ng-click相关联的回调。