Question

所以基本上我有一个网页＆＃39;索引＆＃39;它有一个表格和一个ng-view部分所以我想要的是让用户填写表单中的一些字段并提交它，在表单下面显示ng-view和服务器之旅的结果。

它有效！加载此视图时，它会使用从表单填写的值命中服务器，返回数据并将其呈现给页面。

我遇到的问题是这只适用于ONCE。

填写表单，点击提交，结果页面加载到其下方。更改表单中的值并再次提交，它不会将查询重新发送回服务器。

谁能告诉我哪里出错了？
它是我的第一个有角度的应用程序，而且我一直在想办法解决问题 - 所以我甚至不确定这是可接受的做事方式。

奖金问题：有人可以告诉我为什么我的整个浏览器在*//$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);
    };
});

我假设这是因为在初始化控制器时加载了数据。并且它仅在页面首次加载时初始化，而不是在后续提交时初始化。

Answer 1

您的视图未重新加载的原因是$ location完成了一些优化。如果路径没有变化，则不会重新加载页面。解决这个问题的方法是使用

$route.reload();

然而，您的代码也可以使用更多的组织...为什么不将服务器请求代码移动到您的搜索功能，而不是将服务器请求与加载控制器联系起来？更好的是，您可以创建一个服务来处理在每个控制器中可重用的HTTP请求。阅读有关角度服务的更多信息here。

关于您的第二个问题：当您取消注释该行时，您的浏览器会崩溃，因为您传递给$ routeProvider的路由对象需要一个控制器。

您的路线应如下所示，但请更换＆＃39; controllerName＆＃39;与你的实际控制器。

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

表格ng-submit加载一个子视图，但只加载一次

1 个答案: