data-ng-controllerを破壊的な他のdata-ngプロパティーに追加する

Question

こんにちは私は入力フィールドを検証するために角度を使ってasp.net環境でログインフォームを作成しようとしています。

例えば、ユーザー名が実際にそれはまだ私にエラーを表示 有効ですが、私は

data-ng-controller="loginC" 

破壊的な他のデータ-ngのプロパティを追加するときに問題があります。

<input type="text" name="username" placeholder="username" data-ng-model="class="ng-pristine ng-untouched ng-valid" vm.username" data-ng-required="true" > 

およびスパンのための条件は

<span data-ng-show="form.username.$invalid && form.username.$touched" 
class="help-block">Username is required</span> 

、これは全体のコードです：私は、データ-ngのコントローラを削除していたときに再び

<asp:Content ID="Content2" ContentPlaceHolderID="beforeLogin" Runat="Server"> 
<div class="text-center" style="padding: 50px 0"> 

    <!-- Main Form --> 
    <div class="login-form-1 " style="padding: 1%; border-radius: 10%"> 
     <div class="logo">Login</div> 
     <section class="card register" data-ng-app="Login" data-ng-controller="loginC"> 
      <form name="form" class="text-left" data-ng-submit="vm.login()"> 
       <div class="login-form-main-message login-group"></div> 
       <fieldset> 
        <div class="form-group" data-ng-class="{ 'has-error': form.username.$invalid && form.username.$touched}"> 
         <input type="text" name="username" placeholder="username" data-ng-model="vm.username" data-ng-required="true" /> 
         <span data-ng-show="form.username.$invalid && form.username.$touched" class="help-block">Username is required</span> 
        </div> 
        <div class="form-group" data-ng-class="{ 'has-error': form.password.$invalid && form.password.$touched }"> 
         <input type="password" name="password" id="password" placeholder="Password" class="form-control" data-ng-model="vm.password" data-ng-required="true" /> 
         <span data-ng-show="form.password.$invalid && form.password.$touched" class="help-block">Password is required</span> 
        </div> 
        <div class="form-actions" style="margin: 0 auto; width: 40%;"> 
         <button type="submit" data-ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Login</button> 
         <a href="Registration.aspx" class="btn btn-link">Register</a> 
        </div> 
       </fieldset> 
      </form> 
     </section> 
    </div> 
    <!-- end:Main Form --> 
</div> 

ノートすべて正常に動作します

Answer 1

AngularJSはMV *パターンに従います。したがって、あなたのビュー（すなわち、html）は、 'コントローラ'を介してアプリケーションロジックと話します。

data-ng-controllerを設定すると、ビューにはスコープへの参照があります。コントローラの値には、$scope.value構文を使用してアクセスできます。既定では、$scope.value構文を使用して、コントローラの関数と値にアクセスできます。しかし、この例では、vm.valueが使用されています。 。 - vm.login()、vm.dataLoadingなどです。

この構文は、別名がvmのコントローラがあることを前提としています。しかし、コントローラーはエイリアスなしでインポートされます。 This question goes in to more detail about aliases.ビューにはvmコントローラの参照がなく、vm.usernameの値は未定義であり、検証されません。

'controller as'構文を使用すると、ユーザー名の問題を解決できます。 ng-controller="loginC as vm"。しかし、すべての機能が動作するためには、メソッドを呼び出して値にアクセスするときに一貫性を保つ必要があります。