Divに割り当てられたコントローラのAngularJSメソッド

Question

私はページ内にログインフォームを持っていますが、何らかの理由でログイン機能がフォームの送信時に起動されていないため、独自のコントローラがあります。

拡大ファイル内のフォーム：

<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をコンソールに印刷されているので、コントローラがロードされていますただし、フォームが送信されるとログイン機能は起動しません（つまり、clickedは印刷されません）。

Answer 1

HTMLコードにLoginCtrl as logincontrolを指定してインスタンスを作成しています。

あなたは$scope変数を使用したい場合は、単にthis

角度は以下のように述べていた彼らのdocumentationでこれを定義すると$scopeを交換しng-controller="LoginCtrl"

または

を指定：

次の2つの宣言スタイルが含まれています：

• 一つthisを使用してコントローラに直接メソッドとプロパティを結合する：ng-controller="SettingsController2"

： ng-controller="SettingsController1 as settings"

一方がコントローラに$scopeを注入します