Ng-Click 未触发答案

【问题标题】：Ng-Click not firingNg-Click 未触发
【发布时间】：2016-01-19 05:16:55
【问题描述】：

每当我点击我的提交按钮时，什么都没有发生，目前我想要它做的就是打印出用户名和密码来测试那里的绑定。而且我能够与控制器交谈并打印出我在控制器中制作的硬编码消息，似乎 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>

和控制器类

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

【问题讨论】：

检查控制台页面是否有错误
我有控制台中没有任何内容

标签： javascript angularjs angularjs-controller angularjs-ng-click angularjs-controlleras

【解决方案1】：

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

vm.submitUserDetails = submitUserDetails;

【讨论】：

【解决方案2】：

函数需要附加到$scope

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

【讨论】：

这是部分正确的，他将其与control as 一起使用。要使用$scope，他需要将$scope 扩展到他的控制器中，在这种情况下可能不需要这样做。
你是说他需要添加 $scope 作为控制器依赖项吗？
正确，那就是它将继承所有父 $scope

【解决方案3】：

您的代码似乎存在一些问题，但最大的问题是这些函数实际上并未附加到“this”（vm，正如您在代码中所称的那样）。因此，它们不能被作用域访问，因为它们只能在 RegisterController 函数内部访问。

为了解决这个问题，我会将这段代码添加到你的函数底部：

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

同样，submitUserDetails() 应该返回一个承诺，不是吗？我预计这也会导致一些时髦的行为。

【讨论】：

不，这只是一个测试，看看我的绑定是否正常工作，我还没有返回任何东西