通过将基于AngularJs组件的模式修改为TypeScript感到困惑 [英] confused by adaptation of AngularJs component-based modal to TypeScript

查看:71
本文介绍了通过将基于AngularJs组件的模式修改为TypeScript感到困惑的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

Angular-UI引导程序模式指令的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中此处给出的示例看起来很有希望(尽管有点痛苦),但他的代码实际上也没有显示如何将函数绑定到组件中.

解决方案

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

中指定的绑定

通过从模板中删除ng-controller指令,由$uibModal.open函数创建的控制器已正确绑定到模式,而close函数也已正确绑定.

我沿途学到的有趣的东西:绑定在控制器的构造函数中仍未定义.它们在存在它们的初始化和$ onInit之间的某个时间绑定.

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:

app.component("fringeEdit",   {
    controller: "FringeEditController", 
    templateUrl: "/template/fringeEditTemplate.html", 
    bindings: {
        close: '&',    <---
        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'
      }
    });

That all makes sense in Javascript -- but in TypeScript, I keep running into this problem: where can I find these bindings?

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.

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
 }

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.

解决方案

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

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.

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆