asp.net mvc i angularJS - ukrywanie formularza

asp.net mvc i angularJS - ukrywanie formularza
M8
  • Rejestracja:około 14 lat
  • Ostatnio:3 miesiące
  • Postów:151
0

Witam Wszystkich,

Tworzę z asp.net mvc małą aplikację. Wstawiłem na stronie edycji profilu buttony odkrywające formularze zmiany hasła oraz formularze danych osobowych użytkownika.

Ogólnie wygląda to tak:

skrypt angular

Kopiuj
var app = angular.module('MyModule', []);

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

    $scope.display = false;

    $scope.ShowForm = function () {
        $scope.display = true;
    };

}]);

I w widoku

Kopiuj
<div ng-app="MyModule">

    <hr />
    <div ng-controller="MyController">

        <button type="button" class="btn btn-primary" ng-click="ShowForm()">Formularz zmiany hasła</button>
        <div ng-show="display">

        t      u jest odkrywany formularz

        </div>
    </div>
</div>

Na końcu widoku w @section Scripts{} wczytuję swoje skrypty.

Ogólnie działa wszystko, tylko że przy ładowaniu strony chwilowo pojawia się formularz (do czasu wczytania skryptów angular) po czym znika. Takie trochę nieestetyczne zachowanie.

Ktoś może zna metodę jak sobie z tym poradzić ? Chciałbym wyeliminować chwilowe pojawianie się formularza przy ładowaniu strony do czasu wczytania i zadziałania skryptów angular.


GG: 28287812
Skype: marcinmn.s
1

Dodaj jakies id do swojego formularza i ukryj go przez css. Wtedy jak bedziesz wczytywal strone to formularz nie pojawi sie

0

Angular i id do ukrywania, gsus. Zrob to w angularze

M8
  • Rejestracja:około 14 lat
  • Ostatnio:3 miesiące
  • Postów:151
0

Własnie nie bardzo mam koncepcję jak w angularze go zrobić. Nie chcę czystego formularza z angulara, ze względu na ValidateAntiForgeryToken potrzebuję formularz wygenerowany przez asp.net.
Pewnym rozwiązaniem byłoby zwrócenie z http.get() widoku częściowego, niestety tu angular blokuje inputy i buttony.


GG: 28287812
Skype: marcinmn.s
M8
  • Rejestracja:około 14 lat
  • Ostatnio:3 miesiące
  • Postów:151
0

Poradziłem sobie z problemem wstawiając zamiast rozwiązania polegającego na ukrywaniu formularza przez skrypt angulara rozwiązanie polegające na ajaxowym pobieraniu widoku częściowego.


GG: 28287812
Skype: marcinmn.s
ST
  • Rejestracja:prawie 10 lat
  • Ostatnio:ponad 5 lat
  • Postów:51
0

Użyj ng-if zamiast ng-show.

SO
ST
To, że w ogóle nie wczyta tej części diva do czasu aż warunek nie będzie spełniony, a w jego przypadku najpierw wczytuje, a potem dopiero chowa stąd ten efekt.
SO
Hmmm... coś nie chce mi się wierzyć. Jak dla mnie problemem w takiej sytuacji było to, że html renderował się zanim angular i scope się zainicjalizował, więc moim zdaniem zmiana ng-show na ng-if nic nie da.
ST
Niech założyciel tematu sprawdzi i się wypowie :)
M8
  • Rejestracja:około 14 lat
  • Ostatnio:3 miesiące
  • Postów:151
0
Steff napisał(a):

Użyj ng-if zamiast ng-show.

Niestety to nic nie zmienia, ten sam efekt występuje.


GG: 28287812
Skype: marcinmn.s
ST
Dziwne, miałem podobną sytuację wielokrotnie i to zawsze było lekarstwem. Nawet jak ładuję się szybciej widok niż skrypt angular-a to ng-if nie znając zmiennej display uznaję ją za false i warunek jest nie spełniony.
M8
  • Rejestracja:około 14 lat
  • Ostatnio:3 miesiące
  • Postów:151
0

Witam ponownie.

W sumie problem rozwiązałem dodając do diva klasę hidden, którą na końcu skryptu angulara usuwam

Kopiuj
$('#form1').removeClass('hidden');

A więc po załadowaniu strona nie wyświetla mi formularzy ze względu na dodanie klasy hidden, po wczytaniu skryptu klasy te są usuwane z div-ów, i niewidoczne dopóki dyrektywa angulara ng-show nie pozwoli na wyświetlenie.

Ogólnie efekt końcowy jaki oczekiwałem.


GG: 28287812
Skype: marcinmn.s
marcio
poczytaj o ng-cloak

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.