AngularJS ui modal passing data

Question

This is ui-select where user can select an options:

<ui-select ng-model="state.selected" ng-change="openModal(state.selected,orders.order_id)" ng-if="orders.state == 'Paid'" theme="selectize" ng-disabled="disabled" style="width: 300px;"> .....

Whenever there is changes, it trigger modal from bootstrap

$scope.openModal = function(name,oid){
    $scope.modalInstance = $modal.open({
        templateUrl: 'reservationModal.html',
        scope:$scope,
        name: function(){
            return name;
        }
    });
}

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

$scope.confirmChg = function(){
    console.log('ok...');
}

The template is as follow:

<script type="text/ng-template" id="reservationModal.html">
    <div class="modal-header">
        <h3 class="modal-title">Confirmation</h3>
        <!--<button class="btn btn-warning" ng-click="close()">X</button>-->
    </div>
    <div class="modal-body">
        Confirm to change status to {{name}} ?

    </div>
    <div class="modal-footer">
        <button class="btn btn-danger" type="button" ng-click="confirmChg(status_oid,status)">Yes</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()" data-dismiss="modal">No</button>
    </div>
</script>

The problem is , the {{name}} in template is not displaying. How can I pass variable from open modal function?

I would say usually we do pass data to modal controller via resolve method rather than pass the $scope to the modal:stackoverflow.com/questions/18576454/… — huan feng
– huan feng, Commented Oct 30, 2015 at 5:59

Fridjon Gudjohnsen · Accepted Answer · 2015-10-30 05:24:42Z

5

You need to set the name on the scope, just add the line:

$scope.name = name;

before calling $scope.open. So the openModal function would look like:

$scope.openModal = function(name,oid){
    $scope.name = name;
    $scope.modalInstance = $modal.open({
        templateUrl: 'reservationModal.html',
        scope:$scope,
        name: function(){
            return name;
        }
    });
}

edited Oct 30, 2015 at 5:24

answered Oct 30, 2015 at 5:19

Fridjon Gudjohnsen

8251 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

d3bug3r Over a year ago

where I set it? inside name function?

Fridjon Gudjohnsen Over a year ago

Just at the beginning of openModal. I just clarified the answer.

Collectives™ on Stack Overflow

AngularJS ui modal passing data

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related