Форма ng-submit загружает вложенное представление, но только один раз

Question

Форма ng-submit загружает вложенное представление, но только один раз

0

Таким образом, в основном у меня есть веб-страница "Индекс", которая имеет форму и раздел ng-view.
Поэтому я хочу, чтобы пользователь заполнил некоторые поля в форме и отправил их, ng-view отображается под формой с результатами от поездки сервера.

И это работает! Когда это представление загружает, он набирает сервер со значениями, заполненными из формы, возвращает данные и отображает их на страницу.

Проблема в том, что это работает только один раз.

Заполните форму, нажмите submit, страница результатов загрузится ниже нее. Измените значения в форме и отправьте ее еще раз, и она не будет возвращать запрос на сервер.

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

Бонусный вопрос: может ли кто-нибудь сказать мне, почему мой весь браузер сбой, когда *//$routeProvider.when('/', {templateUrl: '/Reports/Index' });* раскоментирована?

Это все соответствующий код:

//The main index page.
<div ng-app="ReportsApp" ng-controller="indexFormsCtrl" class="form-inline">

    <!-- Our main input form -->
    <form ng-submit="search()">
        <input type="text" ng-model="mySearchField" />
        <input class="btn btn-primary" type="submit" value="Search" />
    </form>

    <div class="container">
        <div ng-view></div>
    </div>
</div>

//Main routing secion
angular.module('ReportsApp', ['ReportsApp.ctrl.bonus', 'ReportsApp.ctrl.index', 'ngRoute'])
    .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

        //When this is present it will make the page crash - like it is stuck in an infinite loop
        //commented out the site works, but it redirects me to /squiffy
        //$routeProvider.when('/', {
            //templateUrl: '/Reports/Index',
        //});
        $routeProvider.when('/MyReport', {
            templateUrl: '/Reports/MyReport',
            controller: 'myReportCtrl',
        });
        $routeProvider.otherwise({
            redirectTo: '/squiffy'
        });
        $locationProvider.html5Mode(false).hashPrefix('!');
    }])

//The index controller - not much to see other than the location.path redirect.
angular.module('ReportsApp.ctrl.index', []).controller('indexFormsCtrl', function ($scope, $location, reportsService) {
    $scope.mySearchField = '';

    $scope.search = function()
    {
        reportsService.mySearchField = $scope.toDate;
        //redirect the view to MyReport
        $location.path('MyReport')
    }
});

//the report contents controller (ng-view controller). Hits the server, gets some json, stores it in $scope
angular.module('ReportsApp.ctrl.bonus', []).controller('myReportCtrl', function ($scope, $http, $location, reportsService) {
    $scope.myModel = null;
    getTheReportData(reportsService);
    //Get the bonus overview
    function getTheReportData(reportsService) {
        alert('searching');
        $scope.myModel = GetDataFromServer(reportsService.mySearchField);
    };
});

Я предполагаю, что это потому, что данные загружаются при инициализации контроллера. И он инициализируется только при первой загрузке страницы, а не при последующих отправках.

jb. 18 авг. 2016, в 15:48

Источник

0

Попробуйте $ routeProvider.when ('/', '/ Reports / Index');
Damiano 18 авг. 2016, в 13:08

Теги:

javascript

angularjs

forms

ngroute

1 ответ

Ещё вопросы

Попробуйте $ routeProvider.when ('/', '/ Reports / Index');

Federico Pettinella · Accepted Answer · 2016-08-18T13-46-00.000Z

Причина, по которой ваше представление не перезагружается, связано с некоторыми оптимизациями, выполненными с помощью $ location. Если путь не изменяется, страница не будет перезагружена. Способ обойти это заключается в использовании

$route.reload();

Однако ваш код может также использовать еще одну организацию... Вместо того, чтобы связывать запрос сервера с загрузкой контроллера, почему бы не переместить код запроса на сервер в вашу функцию поиска? Еще лучше, вы могли бы создать службу для обработки ваших HTTP-запросов, которые могут быть повторно использованы в каждом контроллере. Подробнее об угловых услугах читайте здесь.

Что касается вашего второго вопроса: ваш браузер падает, когда вы раскомментируете эту строку, потому что объект маршрута, который вы передаете $ routeProvider, требует контроллера.

Ваш маршрут должен быть следующим, но замените "controllerName" на ваш фактический контроллер.

$routeProvider.when('/', {
    templateUrl: '/Reports/Index',
    controller: 'controllerName'
});