AngularJsとASP.NET MVC 5 - ng-modelはテキストボックス値をオーバーライドします

Question

@Html.TextBoxForを使用してASP.NET MVC 5を使用してフォームを構築しています（フォームナビゲーションまたはサーバー側の検証が失敗したなど） 。

Angularを使用してクライアントサイドアドレスルックアップを導入しました。これは、フォームフィールドのいくつかが、ng-modelで修飾されていることを意味し、Angularルックアップが検索されたアドレスを設定できるようにします。

例えば：

@Html.TextBoxFor(m => m.Town, new { @class="form-control", ng_model="address.town" }) 

ページが再ロードされたときng-modelは現在MVCモデルから設定された値を上書き追加します。ブラウザでソースを表示

は

テキストボックスの値はMVCモデルからTownに正しく設定されていることを示しているが、角度はその後に沿って来て、無価値フォームが表示されますので、空であるaddress.townを移入します。

どのようにAngularがこれを行うのを防ぐことができますか？

Answer 1

あなたは

<input name="Town" type="text" ng-model="address.town" ng-init="address.town= @Model.Town" /> 

@Html.TextBoxFor(m => m.Town, new { ng_model="address.town", ng_init="address.town= Model.Town" }) 

MVC

から値を強制的に ng-initを使用することができますまた、私はこれはおそらく私より良い答えである、ここで https://stackoverflow.com/a/22567485/2030565

app.directive('input', function ($parse) { 
    return { 
     restrict: 'E', 
     require: '?ngModel', 
     link: function (scope, element, attrs) { 
      if (attrs.ngModel) { 
       val = attrs.value || element.text(); 
       $parse(attrs.ngModel).assign(scope, val); 
      } 
     } 
}; }); 

Answer 2

Angularコントローラが初期化時にモデルに割り当てるサーバーテンプレートの下部にあるJavaScriptセクションの変数を設定できます。

<script> 
    My.Namespace.town = @Html.Raw(Model.Town); 
</script>