javascript - 为什么我的 Controller 没有触发我的 function.js 脚本

标签 javascript html angularjs angularjs-controller

我有 function.js 脚本,其中包括 onClickClear()onValidate() 函数,但它们根本没有触发。我在函数中注入(inject)了 loginCtrl ,但它仍然没有触发 onClickClear()onValidate() 函数。这是清除文本框并添加验证的 function.js 代码和我的 main.cshtml:

var app = angular.module('HelloWorld', []);
app.controller("loginCtrl", function ($scope) {
    $scope.onClickClear = function () {
        $scope.UsernameTxtBox = "";
        $scope.passwordTxtBox = "";
        $scope.rememberMeCheckBox = "";
    };

    $scope.onValidate = function () {
        return ($scope.UsernameTxtBox != "" && $scope.UsernameTxtBox != null) &&
        ($scope.passwordTxtBox != "" && $scope.passwordTxtBox != null);
    };
});

    <body ng-app="HelloWorld">
        <div ng-controller="loginCtrl">
            <div class="container">
                <div class="row">
                    <div class="col-xs-2 col-xs-push-5">
                        <h3>Login</h3>
                    <p>
                        Username:<br />
                        <input type="text" autofocus name="UsernameTxtBox" ng-model="UsernameTxtBox" ng-minlength="3" ng-maxlength="20" placeholder="Username" required>
                        <span style="color: red" ng-show="form1.UsernameTxtBox.$error.minlength">Userame Should Contain Atleast 3 Characters</span>
                        <span style="color: red" ng-show="form1.UsernameTxtBox.$error.maxlength">Limit Exceeded</span>
                    </p>
                    <p ng-bind="name"></p>
                    <p>
                        Password:<br />
                        <input type="password" name="passwordTxtBox" ng-model="passwordTxtBox" ng-minlength="3" ng-maxlength="20" placeholder="Password" required>
                        <span style="color: red" data-ng-show="form1.passwordTxtBox.$error.minlength">Password Should Contain Atleast 3 Characters</span>
                        <span style="color: red" data-ng-show="form1.passwordTxtBox.$error.maxlength">Limit exceeded</span>
                    </p>
                    <p ng-bind="surname"></p>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" data-ng-model="rememberMeCheckBox" data-ng-disabled="!onValidate()">Remember me</label>
                        </div>
                        <button type="button" class="btn btn-success btn-success btn-sm" data-ng-click="onClickClear()" ng-disabled="!onValidate()">Clear</button>
                        <button type="button" class="btn btn-primary btn-sm" data-ng-click="onClickLogin()" ng-disabled="!onValidate()">Login</button>
                        <button type="button" class="btn btn-link btn-xs" data-ng-click="onClickOpen()">Not A Member? Register</button>
                    </div>
                </div>
            </div>
        </div>
    </body>

最佳答案

我不确定你在做什么,但这个例子正在代码片段中工作...它基本上是从你的代码中剪切和粘贴的,我只是将 body 标签更改为 div 并添加两个用户名和密码输入框。

var app = angular.module('HelloWorld', []);
app.controller("loginCtrl", function ($scope) {
    $scope.onClickClear = function () {
        $scope.UsernameTxtBox = "";
        $scope.passwordTxtBox = "";
        $scope.rememberMeCheckBox = "";
    };

    $scope.onValidate = function () {
        return ($scope.UsernameTxtBox != "" && $scope.UsernameTxtBox != null) &&
        ($scope.passwordTxtBox != "" && $scope.passwordTxtBox != null);
    };
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    <div ng-app="HelloWorld">
        <div ng-controller="loginCtrl">
            <div class="container">
                <div class="row">
                    <div class="col-xs-2 col-xs-push-5">
                        <h3>Login</h3>
                        <div class="form-group"><input class="form-control" ng-model="UsernameTxtBox" placeholder="Username"></div>
                        <div class="form-group"><input class="form-control" type="password" ng-model="passwordTxtBox" placeholder="Password"></div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"  data-ng-model="rememberMeCheckBox" data-ng-disabled="!onValidate()">Remember me</label>
                        </div>
                        <button type="button" class="btn btn-success btn-success btn-sm" data-ng-click="onClickClear()" ng-disabled="!onValidate()">Clear</button>
                        <button type="button" class="btn btn-primary btn-sm" data-ng-click="onClickLogin()" ng-disabled="!onValidate()">Login</button>
                        <button type="button" class="btn btn-link btn-xs" data-ng-click="onClickOpen()">Not A Member? Register</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

关于javascript - 为什么我的 Controller 没有触发我的 function.js 脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29492581/

相关文章:

javascript - 使用 javascript 在 <a> 中包装按钮

html - Bootstrap 3 : Filter content of input field using css

javascript - 如何编写 .html.erb javascript 函数来隐藏特定页面的标题?

javascript - Angular-UI( Bootstrap )弹出窗口不起作用?

javascript - 在 AngularJS 中从 html 端访问 $route 的简单方法

javascript - 如果我嵌入标签,onEnded 事件不起作用

javascript - 如何知道用户输入的注册有效邮箱地址是否存在?

javascript - 删除空选择选项时,ng-change 不会触发

html - 有没有一种方法可以使用ImportXML或ImportHTML将格式化的字符串导入到Google电子表格中?

css - AngularJS 表格进入/离开动画