I'm trying to extend an existing AngularJS application. In the old version, the developer upon pressing a form button Generate report
would display a hidden div
. Now due to changes in the use-cases it was necessary to put this div
within a separate view and dynamically switch to it. So I created a new view in the controller reportDetails.html
and it works fine. The hidden view is not shown at first because it requires some values to be set.
The old version did this from the "Generate report" view:
<td class="selection-fields-report">
<label class="invisible">Dummy</label><br>
<button class="btn btn-primary" ng-click="generateReport()" ng-disabled="reportData.notReadyForReport">Generate Report</button>
</td>
My new generateReport()
implementation attempts to switch to the new view "Report details" and set some DOM elements by id
assuming that they are already available ... but they aren't:
$scope.generateReport = function () {
// ...
// switch to the report details
$location.path('/reportDetails');
// but this 'filterStr' element is not yet available????
document.getElementById('filterStr').value = "";
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ error here filterStr doesn't exist ... but it is in the new view reportDetails.html
Do I have to wait for the $location.path('/reportDetails');
to finish i.e. is it a synchronous or asynchronous call?