confused by adaptation of AngularJs component-based modal to TypeScript [duplicate]

问题

This question already has answers here:

TypeScript AngularJS component modal - this.$modalInstance.dismiss is not a function? (1 answer)

When to use the AngularJS `$onInit` Life-Cycle Hook (1 answer)

Closed 6 days ago.

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.

回答1:

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.

来源：https://stackoverflow.com/questions/59516708/confused-by-adaptation-of-angularjs-component-based-modal-to-typescript

标签

angularjs

typescript

angular-ui-bootstrap