Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angular-ui-bootstrap modal not passing back result

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');
        };

    });
like image 794
Michael Trouw Avatar asked Feb 11 '14 01:02

Michael Trouw


People also ask

How to pass and get back data from Bootstrap modals in angular?

To pass and get back data from Bootstrap modals does not require any special arrangements, these communications are beautifully handled by bootstrap modal methods. Here we will first install ng-bootstrap in a new Angular project and then learn how to add NgBootstrap modals.

How to open a modal from another component in angular?

To achieve this, follow these steps: 1. Create a new component with Angular CLI and add some HTML code to the template. 2. Inject MdbModalService to the component from which you want to open the modal and use the open method. You can inject data to the modal by passing it to the data parameter in the modal options.

How to close the modal in Bootstrap?

We can close the modal using the NgbActiveModal class method close and also pass any data to send back to the parent component’s result block. In the my-bootstrap-modal.component.html file just place below HTML template to show modal content with dynamic data passed from parent component:

What is ng-bootstrap in angular?

Note: This tutorial is compatible with Angular version 6,7,8 and 9 The ng-bootstrap package provides the bootstrap components for Angular projects which makes the implementation of bootstrap components in an Angular project very easy.


1 Answers

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);
like image 125
Matt Way Avatar answered Oct 19 '22 07:10

Matt Way