AngularJS: отправить форму обычным способом

Я внедряю AngularJS в существующее веб-приложение, для которого требуется общий HTTP POST, как вы бы сделали без AngularJS.

Это кажется сложнее, чем я ожидал. URL страницы генерируется динамически и не может отображаться с помощью PHP. Я попытался изменить действие формы с помощью jQuery, но это тоже не сработало.

Действительно ли невозможно отправить форму обычным способом? Вот что я имею в виду под нормальной формой:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <form method="post">
        <input type="text" name="txt">
        <input type="submit" name="submit">
    </form>
</body>
</html>

И это та же самая форма с AngularJS:

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
    <form method="post">
        <input type="text" name="txt">
        <input type="submit" name="submit">
    </form>
</body>
</html>

Первая форма выполняет обычную форму сообщения, вторая форма - нет. Согласно http://docs.angularjs.org/api/ng.directive:form это сделано специально, и я могу предоставить параметр "action" в форме. Оставление пустым не работает, и изменение с помощью jQuery, похоже, тоже не работает.

Источник

5 ответов

Я столкнулся с той же проблемой. Пока AngularJS находит пустое (или отсутствует) action атрибут, это предотвратит любую кнопку отправки / ввода от фактической отправки формы.

Мне удалось решить проблему, просто добавив action="#" приписывать.

Это только обходной путь, там будет так некрасиво # в конце POST URL, но работает. Преимущество заключается в том, что вам не нужно жестко кодировать URL-адрес POST (который может генерироваться динамически) в HTML-коде.

Источник

Я обычно делаю:

<form action=".">
Источник

Можете ли вы попробовать добавить пустой атрибут действия, как

<form action="" method="POST">

Согласно алгоритму отправки HTML-формы, пункт 8

Если action - пустая строка, пусть action будет адресом документа формы.

Это означает, что он должен принимать динамически созданный URL и публиковать его, и AngularJS также разрешит это, так как есть атрибут действия

Источник

Я нашел это.. несколько. Оказывается, что изменение действия с помощью jQuery во время загрузки дерева DOM работает, но изменение его после загрузки DOM не работает..

Так что это работает:

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
    <form method="post" ng-submit="submit()" action>
        <input type="text" name="txt">
        <input type="submit" name="submit">
    </form>
</body>
</html>
<script type="text/javascript">
    $("form").get(0).setAttribute( "action", "test.html" );
</script>

Но это не так:

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
    <form method="post" ng-submit="submit()" action>
        <input type="text" name="txt">
        <input type="submit" name="submit">
    </form>
</body>
</html>
<script type="text/javascript">
    $(function() {
        $("form").get(0).setAttribute( "action", "test.html" );
    });
</script>

Это похоже на ужасный хак, но я думаю, мне придется с этим смириться. Если кто-то не может предложить лучшее решение..

Источник

Вы не можете просто использовать

<form ng-submit="submit()" ng-controller="Ctrl">

И добавить метод POST к контроллеру

Источник
Другие вопросы по тегам