ng-submit not firing with angular-touch / touch events

Question

I have a weird issue where touch events are not firing ng-submit OR ng-click (in chrome device dev tools). Chrome dev tools simulates touchstart/touchend events, so I'm not sure why this wouldn't be working. It works fine on desktop.

Given the following HTML form:

<form subscribe-to-newsletter ng-submit="subscribe.submitEmailSubscribe()" ng-class="{ error : subscribe.states.error, success : subscribe.states.success }">
    <div class="status-icon loading" ng-show="subscribe.states.loading"><i class="fa fa-circle-o-notch fa-spin"></i></div>
    <div class="status-icon success" ng-show="subscribe.states.success"><i class="fa fa-check"></i> Subscribed!</div>
    <input type="email" placeholder="Email Address" ng-model="subscribe.email">
    <button type="submit" class="hollow">Subscribe to newsletter</button>
</form>

And the following directive/controller:

angular.module('quiip.directives')
.directive('subscribeToNewsletter', subscribeToNewsletterDirective);

function subscribeToNewsletterDirective(){
    return {
        restrict: 'A',
        scope: {},
        bindToController: {},
        controllerAs: 'subscribe',
        controller: subscribeToNewsletterCtrl,
        link: function(scope, el){
            el.addClass('subscribe-to-newsletter');
        }
    }
}

function subscribeToNewsletterCtrl($scope, $http){
    this.states = {
        loading: false,
        success: false,
        error: false
    };

    this.email = '';

    this.submitEmailSubscribe = function(){
        console.log('submitting');
    }
}

The console log never registers. It works fine on desktop. What's weird is that the class ng-submitted is being added to the form.

Am I missing something with ng-submit and touch events?

Answer 1

I would recommend to either think in components, eg a newsletter-component or to put your logic in an outer controller. You are trying to access a access the directive controller outside your directive. This is not possible. I would suggest to create a component for your feature and put all the logic inside its controller. Also remember to provide a template. Now you can access the components' controller just as you did in your code above when using controllerAs: 'subscribe' .

Put your markup in a seperate file or use inline templates. However, having the template in a seperate file makes your directive more readable, in my opinion.

Then, eg use your directive like so:

<newsletter-component></newsletter-component>