Instead of doing this:
export default function (campaignService) {
return {
scope: {},
template: require('./my-directive.html'),
link: function(scope) {
campaignService.getCampaigns().then((campaigns) => {
scope.campaigns = campaigns;
});
}
};
}
Name your functions!
export default function myDirective(campaignService) {
return {
scope: {},
template: require('./my-directive.html'),
link: function(scope) {
campaignService.getCampaigns().then((campaigns) => {
scope.campaigns = campaigns;
});
}
};
}
Instead of annotating like this (which is not going to work):
/*@ngInject*/
import "./styles.less";
export default function myDirective(campaignService) {
return {
scope: {},
template: require('./my-directive.html'),
link: function(scope) {
campaignService.getCampaigns().then((campaigns) => {
scope.campaigns = campaigns;
});
}
};
}
Annotate like this:
import "./styles.less";
export default function myDirective(campaignService) {
"ngInject"; //I am a string literal
return {
scope: {},
template: require('./my-directive.html'),
link: function(scope) {
campaignService.getCampaigns().then((campaigns) => {
scope.campaigns = campaigns;
});
}
};
}
ng-annotate will then use ngInject to add the following in order to ensure that our Angular code is minification safe:
import "./styles.less";
myDirective.$inject = ['$campaignService'];
export default function myDirective(campaignService) {
"ngInject"; //I am a string literal
return {
scope: {},
template: require('./my-directive.html'),
link: function(scope) {
campaignService.getCampaigns().then((campaigns) => {
scope.campaigns = campaigns;
});
}
};
}