单击链接时未调用AngularJs控制器

Question

目前，我正在为数据库的管理控制台开发一个初始 AngularJs 应用程序。我是 Angular 的新手，所以我从修改 phonecat 教程开始。基本上，我有一个 Jersey REST API，我需要在 Angular 中对其进行调用。 CORS 不是问题，它们都在同一个 Tomcat 上运行。

数据结构是项目中包含组。

我可以从登录重定向到项目列表页面，调用获取项目列表的控制器，我可以单击一个项目并获取详细信息页面，并调用其控制器。但是，当我单击项目详细信息页面中的链接并将其重定向到组列表页面时，永远不会进行 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;

});

}]);

项目详细信息.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>

组列表.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 的方法（有点像项目详细信息），但仍然没有运气。

如果您还有什么要回答我的问题的，请告诉我。我知道这将是一件非常简单的事情，以至于我的额头上会出现一个手印。 （据我所见，可能是一个不应该存在的空间。）

谢谢！

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