JHipster: How to call a controller function from a button, without submitting the form its in

问题

I'm trying to call a controller function when I click a button, but nothing happens. The function itself doesn't even trigger. Here is my code:

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>

Controller

(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');
            });
        }]
    })

As you can see my goal here is to call a method in the Java back end, that will send me a list of string back, and to show them in my page without submitting the form. Here is the java code for reference:

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));
}

来源：https://stackoverflow.com/questions/39297340/jhipster-how-to-call-a-controller-function-from-a-button-without-submitting-th

标签

javascript

angularjs

jhipster