Ng-Click not firing

问题:

whenever I click my submit button nothing happens, currently all I want it to do is print out the username and password to test there bindings. And I am able to talk to the controller and print out hard coded message that I made in the controller, it seem's that the ng-click doesn't fire on that method. Any help would be great, Thanks :D

<section id="register-view" class="mainbar">
    <section class="matter">
        <div class="container">
            <div class="row">
                <label>{{vm.message}}</label>
                <form class="register-form">
                    <label name="username_label"> Username: </label>
                    <input type="text" name="username" ng-model="vm.userDetails.username"/>
                    <br/>
                    <label name="password_label"> Password: </label>
                    <input type="text" name="password" ng-model="vm.userDetails.password"/>
                    <br/>
                    <button type="submit" class="btn btn-default" ng-click="vm.submitUserDetails()">Submit</button>
                </form>

            </div>
        </div>
    </section>
</section>

And controller class

(function () {
    'use strict';

    angular
        .module('app.register')
        .controller('RegisterController', RegisterController);

    RegisterController.$inject = ['$q', 'dataservice', 'logger'];
    /* @ngInject */
    function RegisterController($q, dataservice, logger) {
        var vm = this;
        vm.message = 'baass';
        vm.userDetails = {
            username: '',
            password: ''
        }

        function activate() {
            var promises = [submitUserDetails()];
            return $q.all(promises).then(function () {
                logger.info('Activated Dashboard View');
            });
        }

        function submitUserDetails() {
            console.log('Username: ' + vm.userDetails.username);
            console.log('Password: ' + vm.userDetails.password);
        }
    }
})();

回答1:

You need to add submitUserDetails in controller context to make it available on view, as you only defined the function of submitUserDetails. You should bind its reference to vm.submitUserDetails

vm.submitUserDetails = submitUserDetails;

回答2:

the function needs to be attached to the $scope

$scope.function submitUserDetails() {
        console.log('Username: ' + vm.userDetails.username);
        console.log('Password: ' + vm.userDetails.password);
    }

回答3:

You seem to have a few issues with your code, but the biggest one is that those functions are not actually attached to 'this' (vm as you've called it in your code). So, they can't be accessed by the scope, because they're only accessible inside the RegisterController function.

To solve this, I would add this code to the bottom of your function:

this.activate = activate;
this.submitUserDetails = submitUserDetails;

As well, submitUserDetails() should be returning a promise, no? I expect that's causing some funky behavior as well.