forms - Angularjs，搜索表单，工厂：按钮不起作用

Question

我有一个典型的带有查询编辑器的表单和搜索按钮，我的 Angularjs 应用程序。但是，单击搜索按钮不起作用。如果我最初用表格打开表格，该服务就可以工作。但不是在单击搜索按钮时。代码如下：

HTML vlist.html：

<input ng-model="nachname" type="text" id="nachname" name="nachname" class="search-query" />
<button ng-click="search()" type="submit" class="btn btn-primary">Search</button>
...
<tr ng-repeat="pers in personen">
  <td>{{pers.nachname}}</td>
</tr>
...

控制器：

var app = angular.module( 'cdemoApp', [ 'cdemo.services' ] );

app.config( ['$routeProvider', function( $routeProvider ) {
    $routeProvider.
    when( '/vlist', {
        controller: 'VListCtrl',
        resolve: {
            personlistdto: function( VListLoader ) {
                return VListLoader();
            }
        },
        templateUrl : 'app/view/vlist.html'
             } ).otherwise( { redirectTo: '/' } );
} ] );

app.controller( 'VListCtrl', [ '$scope', 'personlistdto',
                                          function( $scope, personlistdto  ) {
     $scope.search = function(){
            $scope.personen = personlistdto.aaData;
            $scope.iTotalRecords = personlistdto.iTotalRecords;
      };
     $scope.search();
}]);

服务：

var services = angular.module( 'cdemo.services', [ 'ngResource' ] );

services.factory( 'Vers', [ '$resource',
                            function find( $resource ) {
    return $resource( '/cdemo/rest/vers/ajs/:id',
            { id: '@id', isArray: false }
    );
} ] );


services.factory( 'VListLoader', [ 'Vers', '$q',
                                       function( Vers, $q ) {
    console.log('Vloader1');
    var find = function find() {
        var delay = $q.defer();
        Vers.get( function( personlistdto ) {
            delay.resolve( personlistdto );
        }, function() {
            delay.reject( 'Nix fetch' );
        } );
        return delay.promise;
    };

    return find;
} ] );

知道如何获得按钮搜索（包括字段/参数） - 因为单击按钮时没有任何反应？感谢您的回答。

Answer 1

我通过像这样更改控制器使其工作：

  app.controller( 'VListCtrl', [ '$scope', 'personlistdto', 'VListLoader', 
                                              function( $scope, personlistdto, VListLoader  ) {
        $scope.personlistdto = personlistdto;
        $scope.searchFactory = VListLoader;
        $scope.search =  function( ){
            $scope.personlistdto = $scope.searchFactory();
        };

    }
    ]  );

这样就调用了 Factory VListLoader。