CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Gericke
Gericke

Reputation: 2241

Bind values to UI Bootstrap Modal

I have a table with a view button, when view is clicked modal display but now I want to display certain data on the modal. I am using .html pages.

I am not sure what am I missing here

html

<td>
    <span>
        <input class="btn btn-sm btn-dark" data-ng-click="launch('create',client)" type="button" value="view" />
    </span>
</td>

This will luanch the modal

Modal

<div class="modal fade  in" ng-controller="dialogServiceTest">
<div class="modal ng-scope">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <span class="glyphicon glyphicon-star"></span> Client Details
                </h4>
            </div><div class="modal-body">
                <ng-form name="nameDialog" novalidate="" role="form" class="ng-pristine ng-invalid ng-invalid-required">
                    <div class="form-group input-group-lg" ng-class="{true: 'has-error'}[nameDialog.username.$dirty &amp;&amp; nameDialog.username.$invalid]">
                        <label class="control-label" for="username">Name:</label>
                        <input type="text" name="username" id="username" ng-model="client.ClientName" ng-keyup="hitEnter($event)" required="">
                        <span class="help-block">Enter your full name, first &amp; last.</span>
                    </div>
                    <div>{{client.ClientName}}</div>
                </ng-form>
            </div><div class="modal-footer">
                <button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
                <button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(nameDialog.$dirty &amp;&amp; nameDialog.$invalid) || nameDialog.$pristine" disabled="disabled">Save</button>
            </div>
        </div>
    </div>
</div>

Angular

angular.module('modalTest', ['ngRoute','ui.bootstrap', 'dialogs'])
.controller('dialogServiceTest', function ($scope,$http, $rootScope, $timeout, $dialogs) {
    $scope.clients = []; //Array of client objetcs
    $scope.client = {}; //Single client object

    $scope.launch = function (which,client) {
        var dlg = null;

        alert(client.ClientName);
        dlg = $dialogs.create('/templates/Modal.html', 'whatsYourNameCtrl', {}, { key: false, back: 'static' });
        dlg.result.then(function () {
                $scope.client.ClientName = client.ClientName;
     });
})
.run(['$templateCache', function ($templateCache) {
    $templateCache.put('/templates/Modal.html');
 }]);

Upvotes: 1

Views: 7578

Answers (3)

Richard Torcato
Richard Torcato

Reputation: 2770

here is some of my code 

$scope.showScreenSizePicker = function(){
        $scope.actionmsg = "";
        var modalWindow = $modal.open({
            templateUrl: '{{url()}}/modals/modalScreenSizePicker',
            controller: 'modalScreenSizePickerController',
            resolve: {
            titletext: function() {return "Screen Sizes: ";},
            oktext: function() {return "Close";},
            canceltext: function() {return "Cancel";},
            labeltext: function() {return "";},
            }});
    modalWindow.result.then(function(returnParams) {
        $scope.setViewSize(returnParams[0], returnParams[1]);
    });
}

you can see i am passing variables into modal using resolve. If you want to pass values back from the modal you can grab the variable returnParms (array)

and here is my controller code:

angular.module('myWebApp').controller('modalScreenSizePickerController', function($scope, $modalInstance, titletext, labeltext, oktext, canceltext) {
      $scope.titletext = titletext;
      $scope.labeltext = labeltext;
      $scope.oktext = oktext;
      $scope.canceltext = canceltext;
      $scope.customHeight = 800;
      $scope.customWidth = 600;
      $scope.selectCustomSize = function(width, height){
        if (width < 100){ width = 100; }
        if (height < 100){ height = 100; }
        $scope.selectItem(width, height);
      }
       $scope.selectItem = function(width, height) {
        var returnParams = [width, height];
          $modalInstance.close(returnParams);
      };
      $scope.cancel = function() {
        $modalInstance.dismiss();
      };
    });

hope my sample helps

Upvotes: 1

Matt Way
Matt Way

Reputation: 33189

I think what you are looking for is the resolve property you can use with the $modal service. I am not exactly sure which version of UI Bootstrap you are using, but the latest one works as follows:

var myModal = $modal.open({
    templateUrl: '/some/view.html',
    controller: 'SomeModalCtrl',
    resolve: {
        myInjectedObject: function() { return someObject; }
    });
myModal.result.then(function(){
    // closed
}, function(){
    // dismissed
});

Then you can use the injected resolved value inside the modals controller:

app.controller('SomeModalCtrl', function ($scope, $modalInstance, myInjectedObject) {
    // use myInjectedObject however you like, eg:
    $scope.data = myInjectedObject;
});

Upvotes: 1

Michał
Michał

Reputation: 296

You can acces the client in modal by using "$scope.$parent.client" - "$parent" give you $scope from witch the modal was open with all data.

Upvotes: 0

Related Questions