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!
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({
...
});
}