问题描述
限时送ChatGPT账号..当您在 Javascript 中创建一个 AngularJS 组件,并使用 ui-bootstrap 显示为模态时,您传递了一个绑定,模态实例可以使用该绑定来关闭或关闭自身,如下所示:
When you create a AngularJS component in Javascript, and display as a modal using ui-bootstrap, you pass a binding that the modal instance can use to dismiss or close itself, like this:
appponent("fringeEdit", {
controller: "FringeEditController",
templateUrl: "/template/fringeEditTemplate.html",
bindings: {
close: '&', <---
dismiss: '&' . <---
}
});
在 Angular-UI Bootstrap Modal Directive 的 javascript 版本中,这使得 $modal.close()
和 $modal.dismiss()
方法神奇地可用于模态控制器函数,以便模态可以自行关闭:
In the javascript version from the Angular-UI Bootstrap Modal Directive, that makes the $modal.close()
and $modal.dismiss()
methods magically available to the modal controller function so that modal can close itself:
let FringeEditController = function() {
var $ctrl = this;
$ctrl.ok = function () {
$ctrl.close({$value: $ctrl.selected.item}); <==
};
$ctrl.cancel = function () {
$ctrl.dismiss({$value: 'cancel'}); <==
};
}
一旦你注册了模态控制器,父控制器就可以像这样打开模态:
Once you register modal controller, the parent controller can open the modal like this:
$ctrl.openComponentModal = function () {
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
component: 'fringeEdit'
}
});
这一切在 Javascript 中都有意义——但在 TypeScript 中,我一直遇到这个问题:在哪里可以找到这些绑定?
That all makes sense in Javascript -- but in TypeScript, I keep running into this problem: where can I find these bindings?
他们似乎没有像在 javascript 示例中那样神奇地将自己插入到控制器函数中,其中突然有一个 $ctrl.close(...)
函数可用.在这里,我为我的控制器使用了一个类,我定义了关闭和解除函数,尽管我没有实现它们(希望它们以某种方式像在 JS 中那样神奇地落入实例化的控制器中),但这从未发生过.:( 一旦我显示了模态,并触发了 dismissMe
函数,我就会得到 console.log 消息 dismiss() is undefined
.
They don't seem to magically insert themselves into the controller function like they do in the javascript examples, where suddenly there is a $ctrl.close(...)
function available. Here I use a class for my controller, and I define the close and dismiss functions although I don't implement them (hoping that somehow they will magically fall into the instantiated controller like they do in JS) but that never happens. :( Once I show the modal, and trigger the dismissMe
function, I just get the console.log message dismiss() is undefined
.
我想也许我可以以某种方式找到它们"并将dismiss"和close"分配给函数变量,但我不知道在哪里可以找到对这些函数绑定的引用.有点神秘,有人可以给我一些指导吗?
I thought maybe I could "find them" somehow and assign to the function vars "dismiss" and "close", but I don't know where to find the reference to these function bindings. All a bit of a mystery, can someone give me some guidance?
class FringeEditController {
dismiss: ((params: object) => any ) | undefined;
close: ((params: object) => any ) | undefined;
dismissMe() : void {
if (this.dismiss===undefined) {
console.log("dismiss() is undefined!")
} else {
this.dismiss({$value: "dismissed"};
}
}
...implementation
}
here 在 Binary Horizon 博客中给出的示例看起来很有希望(尽管有点痛苦)但他的代码实际上也没有展示如何将函数绑定到组件中.
The example given here in Binary Horizon Blog looked promising (although a bit painful) but his code doesn't actually show how to get the function binding into component either.
推荐答案
好的,这实际上是由于组件模板的问题,而不是 Typescript 代码.在模板内部,我有 ng-controller="fringeEditController"
(是的,愚蠢的)这导致第二个控制器实例化,然后绑定到模态本身.第二个控制器实例没有在 $uibModal.open
函数
Ok, this was actually due to a problem with the component template, not the Typescript code. Inside the template itself, I had ng-controller="fringeEditController"
(Yes, dumb) This resulted in having a second controller instantiated and then bound to the modal itself. This second controller instance did not have the bindings that were specified in the $uibModal.open
function
通过从模板中移除 ng-controller
指令,$uibModal.open
函数创建的控制器被正确绑定到模态,并且关闭函数是正确绑定.
By removing the ng-controller
directive from the template, the controller created by the $uibModal.open
function was properly bound to the modal, and the close function was properly bound.
一路上我学到的有趣的事情:绑定在控制器的构造函数中保持未定义.它们在初始化和它们所在的 $onInit 之间的某个时间被绑定.
interesting things I learned along the way: The bindings remain undefined in the controller's constructor. They get bound sometime between initialization and $onInit where they are present.
这篇关于对基于 AngularJs 组件的模态适应 TypeScript 感到困惑的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论