AngularJs und ASP.NET MVC 5 - ng-Modell überschreiben Textbox Wert

Question

Ich habe ein Formular erstellt mit ASP.NET MVC 5 mit @Html.TextBoxFor, um das Formular mit meinem Modell zu füllen (z. B. nach einer Formularnavigation oder Server-Seite Validierung fehlgeschlagen) .

Ich habe jetzt eine clientseitige Adresssuche mit Angular eingeführt, was bedeutet, dass einige der Formularfelder jetzt mit ng-model dekoriert sind, um die Angular-Suche zu ermöglichen, die gesuchte Adresse zu füllen.

z.B .:

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

Hinzufügen der ng-model jetzt den Wert aus dem MVC-Modell gesetzt hat Vorrang, wenn die Seite neu geladen wird.

Wenn Sie die Quelle im Browser anzeigen, wird der Textboxwert vom MVC-Modell korrekt auf Town gesetzt, aber Angular kommt dann und füllt es mit address.town, das leer ist, so dass das Formular keinen Wert anzeigt.

Wie kann ich verhindern, dass Angular dies tut?

Answer 1

Sie können ng-init verwenden, um einen Wert von MVC

<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" }) 

Alternativ zu erzwingen, verwende ich eine Richtlinie, die ich 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

Sie können eine Variable in einem JavaScript-Abschnitt unten in der Servervorlage festlegen, die Ihr Angular-Controller dem Modell bei der Initialisierung zuweist.

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