Angular-ui-bootstrap modal and typescript

Question

I am using ngDialog with Angular and Typescript however I am trying to change to Angular-ui-boostrap modal as it looks cooler and easier to use.

I have a scenario that I show a list of records using e.g AddressListController and the user Clicks on a record e.g. an address then I show the Modal so the user can Edit/Delete the record. Alternatively user can select the add to add a new record that should show a modal. I want to delegate the Save / Update / Delete of the record (address) to the address controller e.g. AddressController.

The problem that I have is that the modal is showing however the data is not populted. I am not sure if I am using the correct syntax in the template? Also, I prefer the controllerAs syntax.

My code is as following:

In the list controller:

 selectAddress(index: number): void {
        var address = this.contactAssocitedRecords.Addresses[index];
        this.edit(address);
    }

    edit(item: Address) {

        var promise = this.addressService.getAddressWithInfo(item.Id);
        promise.then((response: ng.IHttpPromiseCallbackArg<AddressInfo>) => {
            var addressInfo = response.data;
            console.log(addressInfo); **// This returns all data**

            var options: ng.ui.bootstrap.IModalSettings = {
                templateUrl: "/js/controllers/_MaintainAddress.Html",
                controller: 'CRM.Contacts.AddressController as addressCtrl',
                windowClass: 'app-modal-window',
                resolve: {
                    addressInfo: () => addressInfo 
                }
            };

            this.$uibModal.open(options).result
                .then(updatedItem => this.savedAddress(updatedItem));
            },
            error => {
                this.popupService.showError(error.data.message);
            });

     }


    savedAddress(item: any): void {
        console.log(item);
    }

AddressController:

module CRM.Contacts {

export class AddressController {

    private scope: ng.IScope;
    static $inject = ["$http", "CRM.Contacts.ContactService", "CRM.Common.PopupService", "ngDialog",
        '$uibModalInstance'];

    constructor(private $http: ng.IHttpService, private contactService: ICrudService<Contact>,
        private popupService: CRM.Common.IPopupService,
        private ngDialog: angular.dialog.IDialogService,
        private $uibModalInstance: ng.ui.bootstrap.IModalServiceInstance) {


    }

    save(addressToSave: Address) {
        // TODO: do the actual saving

        console.log(addressToSave);
        this.$uibModalInstance.close(addressToSave);
    }

}

angular.module("CRM").controller("CRM.Contacts.AddressController", AddressController);

}

Template:

        <!-- Form Name -->
        <legend>Edit Address...</legend>

        <!-- Text input-->
        <div class="form-group col-md-6">
            <label class="col-md-4 control-label" for="Id">Id:</label>
            <div class="col-md-8">
                <input id="Id" name="Id" ng-disabled="true" type="text" ng-model="addressCtrl.addressInfo.Address.Id" placeholder="Id" class=" form-control">

            </div>
        </div>

        <!-- Text input-->
        <div class="form-group col-md-6">
            <label class="col-md-4 control-label" for="streetNo">Street No:</label>
            <div class="col-md-8">
                <input id="streetNo" name="streetNo" type="text" ng-model="addressCtrl.addressInfo.Address.StreetNo" placeholder="Street No" class=" form-control" required="">

            </div>
        </div>

        <!-- Text input-->
        <div class="form-group col-md-6">
            <label class="col-md-4 control-label" for="streetName">Street Name:</label>
            <div class="col-md-8">
                <input id="streetName" ng-model="addressCtrl.addressInfo.Address.StreetName" name="streetName" type="text" placeholder="Street Name" class=" form-control" required="">

            </div>
        </div>

        // removed for brevity

        <div class="form-group col-md-offset-8">
            <label class="col-md-4 control-label" for="save"></label>
            <div class="col-md-8">
                <button id="save" title="Save new record" data-toggle="tooltip" data-placement="right" name="submit"
                        ng-click="addressCtrl.save(addressCtrl.addressInfo.Address)" class="btn btn-success" ng-disabled="addNewAddress.$invalid">
                    <span class="glyphicon glyphicon-floppy-disk"></span>
                </button>

            </div>
        </div>

    </fieldset>
</form>

gilamran · Accepted Answer · 2015-12-05 11:48:56Z

4

In your AddressController you should inject the addressInfo and make it public so the template can access it. The data will come from the resolve function.

The AddressController should like this:

module CRM.Contacts {
    export class AddressController {
        private scope:ng.IScope;
        static $inject = ["$http", "CRM.Contacts.ContactService", "CRM.Common.PopupService", "ngDialog",
            '$uibModalInstance', 'addressInfo'];

        constructor(private $http:ng.IHttpService, 
                    private contactService:ICrudService<Contact>,
                    private popupService:CRM.Common.IPopupService,
                    private ngDialog:angular.dialog.IDialogService,
                    private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
                    public  addressInfo:any) {
        }

        save(addressToSave:Address) {
            // TODO: do the actual saving

            console.log(addressToSave);
            this.$uibModalInstance.close(addressToSave);
        }
    }
    angular.module("CRM").controller("CRM.Contacts.AddressController", AddressController);
}

answered Dec 5, 2015 at 11:48

gilamran

7,3144 gold badges33 silver badges54 bronze badges

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

2 Comments

user1829319 Over a year ago

Spot on. That was the trick. You deserve some stars. Couple of side questions: 1- The model is not showing in the middle of the screen. 2- It is not actually a modal i.e clicking outside it will disappear. Any tricks?

gilamran Over a year ago

I have no idea why it's not centered, but to make the dialog stay open on click outside you have to add "backdrop: 'static'" when you open it.

Collectives™ on Stack Overflow

Angular-ui-bootstrap modal and typescript

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