Currently, I am in the process of developing a directive and following the guidelines outlined in the John Papa style guide. In line with this, I have adopted the ControllerAs syntax approach and implemented a small directive as shown below:
(function() {
angular
.module('htApp')
.directive('newsletterSignup', newsletter_signup);
function newsletter_signup($http) {
var directive = {
templateUrl: '../whatever.tpl.html',
restrict: 'EA',
controller : controller,
controllerAs: 'vm',
bindToController: true
};
return directive;
controller.$inject = ['$http'];
function controller($http) {
var vm = this;
function doSubmit(form) {
debugger;
};
vm.doSubmit = doSubmit;
}
}
})();
This directive serves as a newsletter signup service. It requires an HTTP request, hence why it is injected into the controller. However, a complication arises when attempting to access the $http service within the doSubmit() function.
Hence, my inquiry: how can I make use of the injected $http within the doSubmit() function effectively?
UPDATE
The view code will be included for reference purposes, although it functions correctly:
<button class="btn btn-yellow" ng-click="vm.doSubmit(newsletterform)" translate>
footer.ok_button_text
</button>
UPDATE 2
Upon further investigation, it appears that @Tek was correct – the code does indeed work. The reason for my initial confusion could possibly be due to Chrome's JS runtime optimizing the $http when it recognizes that it won't be called.
https://i.sstatic.net/GgDZJ.png
The current implementation functions properly because the runtime anticipates the usage of $http in the console.log() statement. However, upon removing that line, a new issue arises:
https://i.sstatic.net/oea5x.png
When the console.log line is commented out, resulting in no utilization of $http in the doSubmit() call, accessing $http from the console displays it as undefined.