角UI的引导模式，并打字稿 [英] Angular-ui-bootstrap modal and typescript
本文介绍了角UI的引导模式，并打字稿的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用ngDialog与角和打字稿但是我想，因为它看起来冷却器和更容易使用更改为角UI的自举模式。
我有一个场景，我显示了使用例如AddressListController和用户点击的记录例如记录列表一个地址，然后我告诉模态，因此用户可以编辑/删除记录。另外用户可以选择添加添加新的记录中要显示一个模式。我想如委托保存/更新/删除的记录（地址）地址控制器AddressController。
这我的问题是，该模态是显示然而数据不populted。我不知道如果我使用正确的语法在模板？另外，我preFER的controllerAs语法。
我的code是如下：
在列表控制器：
selectAddress（索引：编号）：无效{
VAR地址= this.contactAssocitedRecords.Addresses [指数]
this.edit（地址）;
} 编辑（项目：地址）{ VAR承诺= this.addressService.getAddressWithInfo（item.Id）;
promise.then（（响应：ng.IHttpPromiseCallbackArg＆LT;＆AddressInfo的GT）=＆GT; {
AddressInfo的VAR = response.data;
的console.log（AddressInfo的）; ** //这将返回所有数据** VAR选项：ng.ui.bootstrap.IModalSettings = {
templateUrl：/js/controllers/_MaintainAddress.Html
控制器：'CRM.Contacts.AddressController为addressCtrl，
windowClass：应用程序模态窗口'，
解析：{
AddressInfo的：（）=＆GT; AddressInfo的
}
}; 这一点。$ uibModal.open（选项）。结果
。然后（updatedItem =＆GT; this.savedAddress（updatedItem））;
}，
错误=＆GT; {
this.popupService.showError（error.data.message）;
}）; }
savedAddress（项目：任意）：无效{
的console.log（项目）;
}
AddressController：
模块CRM.Contacts {出口类AddressController { 私人范围：ng.IScope;
静态$注射=$ HTTP，CRM.Contacts.ContactService，CRM.Common.PopupService，ngDialog
'$ uibModalInstance']; 构造函数（私人$ HTTP：ng.IHttpService，私人的ContactService：ICrudService＆LT;联系＆gt;中
私人popupService：CRM.Common.IPopupService，
私人ngDialog：angular.dialog.IDialogService，
私人$ uibModalInstance：ng.ui.bootstrap.IModalServiceInstance）{
} 保存（addressToSave：地址）{
// TODO：做实际节能 的console.log（addressToSave）;
这$ uibModalInstance.close（addressToSave）。
}}angular.module（CRM），控制器（CRM.Contacts.AddressController，AddressController）。
}
模板：
＆LT;！ - 表单名称 - ＆GT;
＆LT;传奇＆gt;编辑地址...＆LT; /传说＆GT; ＆LT;！ - 文字输入 - ＆GT;
＆LT; DIV CLASS =表单组COL-MD-6＆GT;
＆LT;标签类=COL-MD-4控制标签为=ID和SEQ ID：LT; /标签＆gt;
＆LT; DIV CLASS =COL-MD-8＆GT;
＆LT;输入ID =IDNAME =IDNG-禁用=真正的类型=文本NG模型=addressCtrl.addressInfo.Address.Id占位符=ID级=表格控 ＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT;！ - 文字输入 - ＆GT;
＆LT; DIV CLASS =表单组COL-MD-6＆GT;
＆LT;标签类=COL-MD-4控制标签为=streetNo＆GT;街道没有：其中; /标签＆gt;
＆LT; DIV CLASS =COL-MD-8＆GT;
＆LT;输入ID =streetNoNAME =streetNo类型=文本NG模型=addressCtrl.addressInfo.Address.StreetNo占位符=无街级=表格控要求=＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT;！ - 文字输入 - ＆GT;
＆LT; DIV CLASS =表单组COL-MD-6＆GT;
＆LT;标签类=COL-MD-4控制标签为=streetName＆GT;街道名称：＆LT; /标签＆gt;
＆LT; DIV CLASS =COL-MD-8＆GT;
＆LT;输入ID =streetNameNG模型=addressCtrl.addressInfo.Address.StreetNameNAME =streetName类型=文本占位符=街道名称级=表格控要求=＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT; //为简洁起见删除 ＆LT; DIV CLASS =表单组COL-MD-偏移8＆GT;
＆LT;标签类=COL-MD-4控制标签为=保存＆GT;＆LT; /标签＆gt;
＆LT; DIV CLASS =COL-MD-8＆GT;
＆LT;按钮ID =拯救称号=保存新纪录的数据切换=提示数据放置=右NAME =提交
NG-点击=addressCtrl.save（addressCtrl.addressInfo.Address）级=BTN BTN-成功NG-禁用=$ addNewAddress无效。＆GT;
＆LT;跨度类=glyphicon glyphicon-软盘＆GT;＆LT; / SPAN＆GT;
＆LT; /按钮＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; /字段集＆GT;
＆LT; /表及GT;
解决方案
在你AddressController你应该注入将AddressInfo并予以公布，以便模板可以访问它。该数据将来自决心功能。
的 AddressController 应该是这样的：
模块CRM.Contacts {
出口类AddressController {
私人范围：ng.IScope;
静态$注射=$ HTTP，CRM.Contacts.ContactService，CRM.Common.PopupService，ngDialog
'$ uibModalInstance'，'AddressInfo的']; 构造函数（私人$ HTTP：ng.IHttpService，
私人的ContactService：ICrudService＆LT;联系＆gt;中
私人popupService：CRM.Common.IPopupService，
私人ngDialog：angular.dialog.IDialogService，
私人$ uibModalInstance：ng.ui.bootstrap.IModalServiceInstance，
AddressInfo的市民：任何）{
} 保存（addressToSave：地址）{
// TODO：做实际节能 的console.log（addressToSave）;
这$ uibModalInstance.close（addressToSave）。
}
}
angular.module（CRM），控制器（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);
}
这篇关于角UI的引导模式，并打字稿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
