AngularJs i ASP.NET MVC 5 - ng-model nadpisujący wartość pola tekstowego

Question

Mam formularz zbudowany przy użyciu ASP.NET MVC 5 przy użyciu @Html.TextBoxFor do wypełnienia formularza z mojego modelu (np. Po nawigacji formularza lub niepowodzenie walidacji po stronie serwera) .

Wprowadziłem teraz wyszukiwanie adresu po stronie klienta za pomocą Angular, co oznacza, że ​​niektóre pola formularza są teraz ozdobione ng-model, aby umożliwić wyszukiwanie Angular do zapełnienia szukanego adresu.

np .:

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

Dodawanie ng-model teraz nadpisuje wartość ustawioną z modelu MVC, gdy strona jest przeładowana.

Wyświetlenie źródła w przeglądarce pokazuje, że wartość pola tekstowego jest poprawnie ustawiona na Town z modelu MVC, ale Angular następnie pojawia się i wypełnia ją address.town, która jest pusta, więc formularz nie wyświetla żadnej wartości.

Jak mogę zapobiec temu, aby Angular zrobił to?

Answer 1

Można użyć ng-init wymusić wartość z 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" }) 

Ewentualnie użyć dyrektywy, które znalazłem tutaj 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

Można ustawić zmienną w sekcji Javascript na dole szablonu serwera, który kontroler Angular przypisuje modelowi podczas inicjowania.

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