angular-ui-bootstrap modal not passing back result
What does the console.log()
inside $scope.ok
show? If it does indeed show the correct value, I would suggest wrapping your schedule data inside an object, to avoid any scope related issues:
$scope.schedule = { data: '' };
Then inside your modal view:
<textarea class="form-control" rows="15" ng-model="schedule.data"></textarea>
And your output:
$modalInstance.close($scope.schedule.data);
Comments
-
Michael Trouw almost 2 years
I am running into a problem with the modal service from Angular-ui-bootstrap. I have set up the modal according to the example on : http://angular-ui.github.io/bootstrap/ but i can not get a result back from the modal if i remove the list items from the modal content and replace them with a text area and a different ng-model. I would setup a jsfiddle but i do not know how to include specific libraries (like angular-ui-bootstrap) that are necessary to show what i want. I do have a screenshot of my modal : http://d.pr/i/wT7G.
Below is the code from my main controller, main view, modal controller and modal view:
main view code
<button type="button" class="btn btn-success" ng-click="importSchedule()">import schedule (JSON)</button>
main controller
$scope.importSchedule = function() { var modalInstance = $modal.open({ templateUrl: 'views/importmodal.html', controller: 'ModalInstanceCtrl' }); modalInstance.result.then(function (result) { console.log('result: ' + result); // $scope.schedule = angular.fromJson(scheduleJSON); }, function () { console.info('Modal dismissed at: ' + new Date()); }); };
modal view
<div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Import schedule(JSON)</h4> </div> <div class="modal-body"> <textarea class="form-control" rows="15" ng-model="schedule"></textarea> <pre>form = {{schedule | json}}</pre> </div> <div class="modal-footer"> <button class="btn btn-primary" ng-click="ok()">OK</button> <button class="btn btn-default" ng-click="cancel()">Cancel</button> </div>
modal controller
'use strict'; angular.module('VMP') .controller('ModalInstanceCtrl', function ($scope, $modalInstance) { $scope.schedule = ''; $scope.ok = function () { console.log('schedule: ', $scope.schedule); $modalInstance.close($scope.schedule); }; $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; });