通过将基于AngularJs组件的模式修改为TypeScript感到困惑

Question

[当您使用Javascript创建AngularJS组件并使用ui-bootstrap显示为模式时，您传递了一个绑定，模式实例可使用该绑定来关闭或关闭自身，如下所示：

app.component("fringeEdit",   {
    controller: "FringeEditController", 
    templateUrl: "/template/fringeEditTemplate.html", 
    bindings: {
        close: '&',    <---
        dismiss: '&' . <--- 
      }
}); 

在Angular-UI Bootstrap Modal Directive中的javascript版本中，这使$modal.close()和$modal.dismiss()方法神奇地可用于模态控制器功能，以便模态可以自行关闭：

 let FringeEditController = function() {
     var $ctrl = this;

     $ctrl.ok = function () {
       $ctrl.close({$value: $ctrl.selected.item}); <==
     };

     $ctrl.cancel = function () {
       $ctrl.dismiss({$value: 'cancel'}); <==
     };
   }

一旦注册了模态控制器，父控制器就可以像这样打开模态：

$ctrl.openComponentModal = function () {
    var modalInstance = $uibModal.open({
      animation: $ctrl.animationsEnabled,
      component: 'fringeEdit'
      }
    });

这在Javascript中很有意义-但在TypeScript中，我一直遇到这个问题：在哪里可以找到这些绑定？

[它们似乎没有像在javascript示例中那样神奇地将自己插入到控制器函数中，突然之间有$ctrl.close(...)函数可用。在这里，我为控制器使用了一个类，并且定义了close和dismiss函数，尽管我没有实现它们（希望它们以某种方式像在JS中一样神奇地落入实例化的控制器中），但从未发生过。 :(一旦我显示了模态，并触发了dismissMe功能，我只得到console.log消息dismiss() is undefined。

我以为也许可以以某种方式“找到它们”并将其分配给函数vars“ dismiss”和“ close”，但是我不知道在哪里可以找到这些函数绑定的引用。有点神秘，有人可以给我一些指导吗？

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
 }

[Binary Horizo​​n Blog here中给出的示例看起来很有希望（尽管有点痛苦），但是他的代码实际上也没有显示如何将函数绑定到组件中。

Answer 1

好吧，这实际上是由于组件模板而不是Typescript代码出现问题。在模板本身内部，我有ng-controller="fringeEditController"（是，很傻），这导致实例化了第二个控制器，然后将其绑定到模态本身。第二个控制器实例不具有$uibModal.open函数中指定的绑定