J'essaie d'ajouter un paramètre de fonction angulaire à une directive écrite en TypeScript mais je ne dois pas avoir la bonne syntaxe. Voici un exemple de ma directive:

export class NewUserDirective implements ng.IDirective {
    public restrict: string = "E";
    public replace: boolean = true;
    public templateUrl: string = '/views/_dialogs/newUserDialog.html';
    public controller = Directives.NewUserController;
    public controllerAs: string = 'Ctrl';
    public bindToController: boolean = true;
    public scope: any = {
        showDialog: '=',
        saveInProgress: '=',
        onSuccessCallback: '&',
        onClosingCallback: '&'
    };
}

Et voici un extrait de mon contrôleur:

export class NewUserController {
    static $inject = ["$scope", "$q", "UserServices"];

    public showDialog: boolean;
    public saveInProgress: boolean;
    public onSuccessCallback: () => void;
    public onClosingCallback: () => void;

....

    public save(): void {

        //Flag as saving
        this.saveInProgress = true;

        //Save the plan
        this.UserServices.createUser(this.newUser).then(x => {

            //When finished, hide the modal
            this.showDialog = false;

            //Let parent know new user is created
            this.onSuccessCallback();
        });
    }

}

Tout fonctionne sauf le paramètre de fonction dans le contrôleur parent. J'ai essayé quelques syntaxes différentes dans l'implémentation de la directive comme ceci:

    <new-user-directive on-success-callback="loadData()" ...

Et ça:

    <new-user-directive on-success-callback="loadData" ...
1
Lereveme 9 mars 2016 à 21:55

3 réponses

Meilleure réponse

Utilisez-vous controllerAs pour le contrôleur externe qui a la méthode loadData dessus? Si c'est le cas, vous devrez créer votre directive comme ceci (en supposant que vous avez nommé notre contrôleur externe 'Ctrl'). Remarquez le Ctrl. devant loadData()

<new-user-directive on-success-callback="Ctrl.loadData()" ...
3
TwitchBronBron 9 mars 2016 à 19:41

Les méthodes sont transmises via la portée $ et non sur le contrôleur. Vous devez créer un constructeur:

constructor(private $scope, ....){
}

Et appelez la méthode à partir de la portée $ comme ceci:

this.$scope.onSuccessCallback();
0
Slava Shpitalny 9 mars 2016 à 19:48

Vous avez controllerAs = ' Ctrl ' donc on-success-callback = " Ctrl .loadData ()"

1
nullforce 9 mars 2016 à 19:40