양식 ng-submit은 하위보기를로드하지만 한 번만

Question

기본적으로 양식 및보기 섹션이있는 '색인'웹 페이지가 있습니다.
그래서 내가 원하는 것은 사용자가 양식의 일부 필드를 채우고 제출하는 것입니다. ng-view는 양식 아래에 서버 트립의 결과와 함께 렌더링됩니다.

그리고 작동합니다! 이 뷰가로드되면 양식에서 채워진 값으로 서버에 도달하고 데이터를 반환하고이를 페이지로 렌더링합니다.

내가 가진 문제는 이것이 한 번만 작동한다는 것입니다.

양식을 작성하고 제출을 누르면 결과 페이지가 그 아래에로드됩니다. 양식의 값을 변경하고 다시 제출하면 쿼리가 서버로 다시 실행되지 않습니다.

어디서 잘못 알 수 있습니까?
내 첫 번째 각도 앱이고 내가 따라갈 때 물건을 알아 냈으므로 이것이 허용 된 방법 일지 확신하지 못합니다.

보너스 : *//$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로 전달하는 경로 개체에 컨트롤러가 필요하기 때문에 해당 행의 주석을 제거하면 브라우저가 충돌합니다.

경로는 다음과 같아야하지만 'controllerName'을 실제 컨트롤러로 바꾸십시오.

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