Question

我在页面中有一个登录表单，它有自己的控制器来处理登录功能但是由于某种原因，在提交表单时没有触发登录功能。

较大视图文件中的表单：

if (Regex.IsMatch(stringToBeMatched, @"^[A-Za-z]{3}[0-9]{3}$")) {
  //TODO: put a relevant code here
}

登录控制：

<div class="login-wrap" ng-controller="LoginCtrl as logincontrol">

        <form ng-class="{submited: submited}" class="form-login" novalidate name="loginForm" x-ng-submit="logincontrol.login()">

            <div class="form-group" ng-class="{errorEmail: loginForm.email.$error.required || loginForm.email.$error.email}">
                <input type="email" name="email" id="email" class="form-control login-form-input" placeholder="{{'Email' | translate}}" x-ng-model="username" required>
            </div>

            <div class="form-group" ng-class="{errorPassword: loginForm.password.$error.required}">
                <input type="password" id="password" name="password" class="form-control login-form-input" placeholder="{{'Password' | translate}}" x-ng-model="password" required>
            </div>

            <div class="text-center">
                <button class="btn btn-success login-button" type="submit" translate>SIGN IN</button>
            </div>

        </form>

</div>

当加载登录视图时，控制台中会打印angular.module('services.security') .controller('LoginCtrl', function ($scope, securityService, $rootScope) { $scope.messages = { error: false }; console.log("HERE"); $scope.submited = false; $scope.loading = false; var validateEmail = function( email ) { var pattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return email.match( pattern ); }; $scope.login = function() { console.log("clicked"); $scope.submited = true; if ( !$scope.loginForm.email.$viewValue ) { $scope.loginForm.email.$dirty = true; $scope.loginForm.email.$invalid = true; $scope.loginForm.email.$error.required = true; } if ( !$scope.loginForm.password.$viewValue ) { $scope.loginForm.password.$dirty = true; $scope.loginForm.password.$invalid = true; $scope.loginForm.password.$error.required = true; } if ( validateEmail($scope.loginForm.email.$viewValue) ) { if ( $scope.loginForm.$valid ) { $scope.messages.error = false; $scope.loading = true; securityService.login($scope.loginForm.email.$viewValue, $scope.loginForm.password.$viewValue).then(function() { $scope.loading = false; }, function(data) { console.log(data) $scope.loading = false;; }); } } else { if ( $scope.loginForm.email.$viewValue ){ $scope.loginForm.email.$dirty = true; $scope.loginForm.email.$invalid = true; $scope.loginForm.email.$error.email = true; } } }; });，因此正在加载控制器，但是在提交表单时不会触发登录功能（即HERE未获得打印）。

Answer 1

您正在通过在HTML代码中指定LoginCtrl as logincontrol来创建实例。

如果您想使用$scope变量，请指定ng-controller="LoginCtrl"

或

将$scope替换为this

Angular在documentation中定义了这一点，如下所示：

下面列出了两种不同的声明风格：


使用this：ng-controller="SettingsController1 as settings"
将方法和属性直接绑定到控制器上
将$scope注入控制器：ng-controller="SettingsController2"

控制器中的AngularJS方法分配给Div不工作

1 个答案: