Question

目前，我正在为数据库的管理控制台创建一个初始的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详细信息），但仍然没有运气。

如果您还有其他任何事情可以回答我的问题，请告诉我。我知道它会变得如此简单，以至于我的额头上会出现一个手印。（从我所见过的，可能是一个不应该出现的空间。）

谢谢！

Answer 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，然后从链接中删除＃符号。

Answer 2

你有：

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相关联的回调。

单击链接时不会调用AngularJs控制器

2 个答案: