有沒有辦法更有效地編寫這些角度綁定？

Question

我在我的Angular JS 1.2.6應用程序的視圖中嵌入了一個表單。

<div class="container" ng-controller="LoginCtrl as signin"> 
<div class="row"> 
    <div class="col-md-4"> 
    <form name="signin.myForm" novalidate autocomplete="off"> 
    <h1>Sign In</h1> 
    <div class="form-group" ng-class="{'has-error': (signin.myForm.name.$error.required || signin.myForm.name.$error.minlength) && signin.myForm.name.$dirty}"> 
     <label>Name</label> 
     <input class="form-control" type="text" name="name" ng-model="signin.myForm.data.name" required ng-minlength="3"> 
     <span class="help-block" ng-show="signin.myForm.name.$error.required && signin.myForm.name.$dirty" >Name is required.</span> 
     <span class="help-block" ng-show="signin.myForm.name.$error.minlength && signin.myForm.name.$dirty" >Must be at least 3 characters.</span> 
    </div>  
    <button class="btn btn-primary" ng-disabled="!signin.myForm.$valid" ng-click="signin.submit()">Sign in</button> 
    </form> 
</div> 

與該控制器：

app.controller('LoginCtrl', ['$log',function($log){ 
var ctrl = this; 

ctrl.submit = function(){ 
console.log(ctrl.myForm); 

if(ctrl.myForm.$valid){ 
    console.log('the form is valid'); 
    } 
    }; 
}]); 

正如你看到的，讓表單字段的數據是作爲登入我被教導要首先同範圍的一部分做ng-controller="LoginCtrl as signin"然後我風與模型錯綜複雜的名稱和屬性，如signin.myForm.name.$error.required

這是正確的方式d它呢？它似乎工作，但雖然我是一個noob這似乎有點糾結於我。這真的是最佳做法嗎？

Answer 1

我認爲看到類似這樣的東西更爲常見，在這種情況下，將東西附加到注入的$scope而不是this，然後您不必在HTML中的引用上放置名稱空間限定符。

<div class="container" ng-controller="LoginCtrl"> 
 
<div class="row"> 
 
    <div class="col-md-4"> 
 
    <form name="myForm" novalidate autocomplete="off"> 
 
    <h1>Sign In</h1> 
 
    <div class="form-group" ng-class="{'has-error': (myForm.name.$error.required || myForm.name.$error.minlength) && myForm.name.$dirty}"> 
 
     <label>Name</label> 
 
     <input class="form-control" type="text" name="name" ng-model="signin.myForm.data.name" required ng-minlength="3"> 
 
     <span class="help-block" ng-show="signin.myForm.name.$error.required && myForm.name.$dirty" >Name is required.</span> 
 
     <span class="help-block" ng-show="myForm.name.$error.minlength && myForm.name.$dirty" >Must be at least 3 characters.</span> 
 
    </div>  
 
    <button class="btn btn-primary" ng-disabled="!myForm.$valid" ng-click="submit()">Sign in</button> 
 
    </form> 
 
</div>

app.controller('LoginCtrl', ['$scope', '$log',function($scope, $log){ 
 

 
     $scope.submit = function(){ 
 
     console.log($scope.myForm); 
 

 
     if($scope.myForm.$valid){ 
 
      console.log('the form is valid'); 
 
     } 
 
    }; 
 
}]);