angular-ui-bootstrap modal not passing back result

31,156

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);
Share:
31,156
Michael Trouw
Author by

Michael Trouw

@michahell on Twitter

Updated on August 06, 2022

Comments

  • Michael Trouw
    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">&times;</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');
            };
    
        });