Ng-Click 不触发 [英] Ng-Click not firing

问题描述

每当我点击提交按钮时，什么都没有发生，目前我想要做的就是打印出用户名和密码来测试那里的绑定.而且我能够与控制器交谈并打印出我在控制器中制作的硬编码消息，似乎 ng-click 不会在该方法上触发.任何帮助都会很棒，谢谢:D

<section class="matter"><div class="容器"><div class="row"><label>{{vm.message}}</label><form class="register-form"><label name="username_label">用户名:</label><input type="text" name="username" ng-model="vm.userDetails.username"/><br/><label name="password_label">密码:</label><input type="text" name="password" ng-model="vm.userDetails.password"/><br/><button type="submit" class="btn btn-default" ng-click="vm.submitUserDetails()">提交</button></表单>

</节></节>

和控制器类

(函数(){'使用严格';有角的.module('app.register').controller('RegisterController', RegisterController);RegisterController.$inject = ['$q', 'dataservice', 'logger'];/* @ngInject */函数注册控制器($q，数据服务，记录器){var vm = 这个；vm.message = '低音';vm.userDetails = {用户名: ''，密码: ''}功能激活(){var promises = [submitUserDetails()];返回 $q.all(promises).then(function () {logger.info('激活的仪表板视图');});}函数提交用户详细信息(){console.log('用户名:' + vm.userDetails.username);console.log('密码:' + vm.userDetails.password);}}})();

解决方案

您需要在控制器上下文中添加 submitUserDetails 以使其可用，因为您只定义了 submitUserDetails 的功能.您应该将其引用绑定到 vm.submitUserDetails

vm.submitUserDetails = submitUserDetails;

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

解决方案

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;

这篇关于Ng-Click 不触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！