angularjsecmascript-6ng-dialog

ngDialog in ES6 Angular 1.5 controller


I'm trying to rewrite my Angular 1.5 code to ES6. I'm using ng-dialog and I'm importing it but not injecting it into the controller as I'm trying to make it a dependency of the module itself. I have the following code:

import angular from 'angular';
import ngDialog from '../libraries/ng-dialog';

const template = `<div>
        <button ng-click="ctrl.openTheDialog()">Click Me</button>
    </div>`;

class MyController {
    constructor($scope) {
        'ngInject';
        this.$scope = $scope;
    }

    openTheDialog() {
        ngDialog.open({
            template: templateUrl,
            scope: this.$scope
        });
    }
}

angular.module('myApp', ['ngDialog'])
    .component('myComponent', {
        template: template,
        controllerAs: 'ctrl',
        controller: MyController
    });

When I click the button, I get an error message that open is not a function. I'm not really sure where I made the mistake here. Can someone help point out the error? Thanks!


Solution

  • Turns out you just need to set the ngDialog to a property in the constructor:

    constructor($scope, ngDialog) {
        this.ngDialog = ngDialog;
        ...
        ...
    }
    
    openTheDialog() {
        this.ngDialog.open({
        ...
        });
    }