CODEWITHSUNDEEP
angularjsmodal-dialog
GhostCore
GhostCore

Reputation: 61

Issue with binding data from Modal Dialog to another area of web app

I've been searching around for a solution to a problem, which I believe should be relatively easy to solve - that being the use of Angular.js's two-way databinding

I have a modal dialog (using the Angular ui-bootstrap code for modal dialog) from which I want to take inputted text and output to the main application page, I've got a working Plunker (it works with data-binding as I can see the input value in the modal dialog), however i'm wanting to take that value and bind it to the section under Projects

my html

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">
        <script type="text/ng-template" id="myModalContent.html">
            <div class="modal-header">
                <h3 class="modal-title">Add Project</h3>
            </div>
            <div class="modal-body">
                Project Name: <input type="text" ng-model="name"></input>
            {{name}}
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>

        In Modal: {{ name }}
        </script>

        <button class="btn btn-default" ng-click="open()">Add Project</button>
    </div>

<div class="col-lg-6">
                    <div class="table-responsive" ng-model="name">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Project</th>
                                    <th>Badges</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>{{$scope.name}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
        </div> 
  </body>
</html>

my javascript

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

$scope.name = "";

    $scope.open = function (size) {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: size,
            resolve: {
                projName: function () {
                    return $scope.name;
                }
            }
        });

        modalInstance.result.then(function (pName) {
            $scope.name = pName;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };

});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, projName) {

    $scope.name = projName;

    $scope.ok = function () {
        $modalInstance.close($scope.name);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

Many Thanks in advance

Upvotes: 0

Views: 1006

Answers (1)

Prabhat Nigam ISDS
Prabhat Nigam ISDS

Reputation: 19

As the main application page is operated by ModalDemoCtrl controller and model is operated by ModalInstanceCtrl controller, so they can't use the scope variable of each other, these controllers have no relationship.

There is the only way to pass ModalDemoCtrl scope variable data to ModalInstanceCtrl, using resolve method of $model service, as you did.

resolve:{items: function () {return $scope.items;}

and ModalInstanceCtrl scope data to ModalDemoCtrl using $modalInstance.close(modeldata), which you did.

so if you want to pass the modal input to main application. use it as below ...

In ModalInstanceCtrl

$scope.ok = function () {
    $modalInstance.close($scope.name);
  };

In ModalDemoCtrl

modalInstance.result.then(function (nameFromModal) {
      $scope.name = nameFromModal;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });

Upvotes: 1

Related Questions