CODEWITHSUNDEEP
angularjsangular-ui-bootstrapbootstrap-modal
tetsi
tetsi

Reputation: 13

How to pass a function variable to a Boostrap UI modal?

I need to pass a variable to my modal when clicking on the open button. I'd like to do it with the angular bootstrap ui modal. I need this because I will use a reusable modal for each page, and depending on the page I want to change the content of the modal.

I named my variable 'x' for the example.

Here is the code I'm working on :

On the second alert, the object is null, if anyone has a solution, even with an other modal 'coding style', I would be grateful :)

Script : 

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

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

var ModalInstanceCtrl = function ($scope, $modalInstance, x) {
    alert(x);
    $scope.ok = function () {
        $modalInstance.close();
    };

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

HTML : 

<!doctype html>
<html ng-app="plunker">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>

    <div ng-controller="ModalDemoCtrl">
        <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>Title</h3>
        </div>
        <div class="modal-body">
            {{ x }}
        </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>
        </script>

        <button class="btn" ng-click="open('x')">Open</button>
    </div>
</body>
</html>

Upvotes: 1

Views: 1462

Answers (1)

Michael
Michael

Reputation: 3104

You never stored the variable 'x' in the $scope. I fixed your example - see here on plunker

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

   $scope.open = function (x) {
     var modalInstance = $modal.open({
         templateUrl: 'myModalContent.html',
         controller: ModalInstanceCtrl,
         resolve: {
             x: function () {
                 return x; // <-- just use the function parameter
             }
         }
     });
   };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, x) {
    $scope.x = x; // store x in the scope
    $scope.ok = function () {
        $modalInstance.close();
    };

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

Upvotes: 1

Related Questions