Angular-ui-bootstrap 模态和打字稿 [英] Angular-ui-bootstrap modal and typescript

查看：22
本文介绍了Angular-ui-bootstrap 模态和打字稿的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在将 ngDialog 与 Angular 和 Typescript 一起使用，但是我正在尝试更改为 Angular-ui-boostrap 模式，因为它看起来更酷且更易于使用.

我有一个场景，我使用例如 AddressListController 显示记录列表，并且用户单击记录，例如一个地址，然后我显示模态，以便用户可以编辑/删除记录.或者，用户可以选择添加以添加应显示模式的新记录.我想将记录(地址)的保存/更新/删除委托给地址控制器，例如地址控制器.

我遇到的问题是模式正在显示，但数据没有填充.我不确定我是否在模板中使用了正确的语法?另外，我更喜欢 controllerAs 语法.

我的代码如下:

在列表控制器中:

 selectAddress(index: number): void {var address = this.contactAssocitedRecords.Addresses[index];this.edit(地址)；}编辑(项目:地址){var promise = this.addressService.getAddressWithInfo(item.Id);promise.then((响应:ng.IHttpPromiseCallbackArg) => {var addressInfo = response.data;控制台日志(地址信息)；**//这将返回所有数据**var 选项:ng.ui.bootstrap.IModalSettings = {templateUrl: "/js/controllers/_MaintainAddress.Html",控制器:'CRM.Contacts.AddressController as addressCtrl',windowClass: 'app-modal-window',解决: {地址信息:() =>地址信息}};this.$uibModal.open(options).result.then(updatedItem => this.savedAddress(updatedItem));},错误 =>{this.popupService.showError(error.data.message);});}保存地址(项目:任何):无效{控制台日志(项目)；}

地址控制器:

模块 CRM.Contacts {导出类地址控制器{私有范围:ng.IScope；static $inject = [$http"、CRM.Contacts.ContactService"、CRM.Common.PopupService"、ngDialog"、'$uibModalInstance'];构造函数(私有 $http:ng.IHttpService，私有 contactService:ICrudService，私人弹出服务:CRM.Common.IPopupService，私人 ngDialog:angular.dialog.IDialogService，私人 $uibModalInstance: ng.ui.bootstrap.IModalServiceInstance) {}保存(地址到保存:地址){//TODO: 做实际的保存console.log(addressToSave);this.$uibModalInstance.close(addressToSave);}}angular.module(CRM").controller(CRM.Contacts.AddressController", AddressController);

}

模板:

 <legend>编辑地址...</legend><!-- 文本输入--><div class="form-group col-md-6"><label class="col-md-4 control-label";for=Id">Id:</label><div class="col-md-8"><输入id=Id"名称=ID"ng-禁用=真"；类型=文本"ng-model="addressCtrl.addressInfo.Address.Id";占位符=Id"类="表单控制"

<!-- 文本输入--><div class="form-group col-md-6"><label class="col-md-4 control-label";for=streetNo">街道号码:</label><div class="col-md-8"><input id="streetNo";名称=街道号"类型=文本"ng-model="addressCtrl.addressInfo.Address.StreetNo";占位符=街道号"类="形式控制"必需=">

<!-- 文本输入--><div class="form-group col-md-6"><label class="col-md-4 control-label";for=streetName">街道名称:</label><div class="col-md-8"><input id="streetName";ng-model =addressCtrl.addressInfo.Address.StreetName"名称=街道名称"类型=文本"占位符=街道名称"类="形式控制"必需=">

//为简洁起见删除<div class="form-group col-md-offset-8"><label class="col-md-4 control-label";for=保存"></label><div class="col-md-8"><button id="save";title="保存新记录";数据切换=工具提示"；数据放置=正确"名称=提交"ng-click="addressCtrl.save(addressCtrl.addressInfo.Address)";class =btn btn-success"ng-disabled="addNewAddress.$invalid"><span class="glyphicon glyphicon-floppy-disk"></span>

</fieldset></表单>

解决方案

在你的 AddressController 中，你应该注入 addressInfo 并公开它，以便模板可以访问它.数据将来自解析函数.

AddressController 应该是这样的:

模块 CRM.Contacts {导出类地址控制器{私有范围:ng.IScope；静态 $inject = ["$http", "CRM.Contacts.ContactService", "CRM.Common.PopupService", "ngDialog",'$uibModalInstance', 'addressInfo'];构造函数(私有 $http:ng.IHttpService，私人联系服务:ICrudService<联系方式>，私人弹出服务:CRM.Common.IPopupService，私人 ngDialog:angular.dialog.IDialogService,私人 $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,公共地址信息:任何){}保存(地址到保存:地址){//TODO: 做实际的保存console.log(addressToSave);this.$uibModalInstance.close(addressToSave);}}angular.module("CRM").controller("CRM.Contacts.AddressController", AddressController);}

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>

解决方案

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);
}

这篇关于Angular-ui-bootstrap 模态和打字稿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆