Ng-点击不触发

Ng-Click not firing

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

和控制器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);
        }
    }
})();

您需要在控制器上下文中添加 submitUserDetails 以使其在视图中可用,因为您只定义了 submitUserDetails 的函数。您应该将其引用绑定到 vm.submitUserDetails

vm.submitUserDetails = submitUserDetails;

函数需要附加到 $scope

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

您的代码似乎有一些问题,但最大的问题是这些函数实际上并未附加到 'this'(vm,正如您在代码中所称) .因此,它们不能被作用域访问,因为它们只能在 RegisterController 函数内部访问。

为了解决这个问题,我会将这段代码添加到您的函数的底部:

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

另外,submitUserDetails() 应该返回一个承诺,不是吗?我预计这也会导致一些奇怪的行为。