JHipster：如何从按钮调用控制器功能，而不提交表单

Question

当我点击按钮时，我试图调用控制器功能，但没有任何反应。该功能本身甚至不会触发。这是我的代码：

HTML

<form name="editForm" id="nameForm" class="fruit-form" role="form" novalidate ng-submit="vm.save()" show-validation>
    <button type="button" class="close" ng-click="vm.test()">Test</button>
    <div ng-repeat="fruit in fruits">
        {{fruit}}
    </div>
    <button type="submit"></button>
</form>

控制器

(function() {
'use strict';
angular.module('testApp').controller('FruitDialogController', FruitDialogController);

    FruitDialogController.$inject = ['$scope', '$stateParams', '$uibModalInstance', 'entity', 'Fruit'];

    function FruitDialogController ($scope, $stateParams, $uibModalInstance, entity, Fruit) {
        var vm = this;
        vm.values_from_server_side= "";

        vm.test = function () {
           alert("test");
           //Fruit.getData(function(result){
               //vm.roles = result;
           //});
        };

        vm.save = function () {
            vm.isSaving = true;
            if (vm.fruit.id !== null) {
                Fruit.update(vm.fruit, onSaveSuccess, onSaveError);
            } else {
                Fruit.save(vm.fruit, onSaveSuccess, onSaveError);
            }
        };
    };
}
})();

Fruit.state.js：

function stateConfig($stateProvider) {
    $stateProvider
    ...
    ...
    .state('fruit.new', {
        parent: 'fruit',
        url: '/new',
        data: {
            authorities: ['ROLE_USER']
        },
        onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
            $uibModal.open({
                templateUrl: 'app/entities/fruit/fruit-dialog.html',
                controller: 'FruitDialogController',
                controllerAs: 'vm',
                backdrop: 'static',
                size: 'lg',
                resolve: {
                    entity: function () {
                        return {
                            name: null,
                            data: null,
                            id: null
                        };
                    }
                }
            }).result.then(function() {
                $state.go('fruit', null, { reload: true });
            }, function() {
                $state.go('fruit');
            });
        }]
    })

正如你可以看到我的目标是在Java后端调用一个方法，它将向我发送一个字符串返回列表，并在我的页面中显示它们而不提交表单。以下是供参考的java代码：

private ResponseEntity<ArrayList<String>> getData() {
    ArrayList<String> data = new ArrayList<String>();
    data.add("test1");
    data.add("test2");
    return Optional.ofNullable(data)
            .map(result -> new ResponseEntity<>(
                result,
                HttpStatus.OK))
            .orElse(new ResponseEntity<>(HttpStatus.NOT_FOUND));
}