0

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?

Harley Alexander
  • 127
  • 1
  • 12
  • What's the `subscribe` in your `ng-submit`? Are you trying to access the directive controller outside your directive? Your directive has no template and the controller is only available to the template or directives that `require` the controller. – LordTribual Oct 23 '15 at 08:39
  • `subscribe` is the controllerAs syntax for the controller directive. I would rather keep away from a template and just attach the js functionality as the layout for each subscribe for differs depending where it is on the site (sometimes 1 column, sometimes 2) – Harley Alexander Oct 25 '15 at 05:09
  • This is not possible. Either you use a template or put the logic inside a controller outside your directive. – LordTribual Oct 26 '15 at 08:43
  • OK, so use `ng-controller="SubscribeController"` instead of a directive's controller? – Harley Alexander Oct 27 '15 at 02:59
  • Yes, why do you even need the directive? You only add the class so far and the submit action can also be handled within your controller. I don't wanna tell you directives are bad, it's quite the contrary but then you have to think in components and make a newsletter-widget, so to say. Your directive then has a template and its own controller. – LordTribual Oct 27 '15 at 09:16
  • Yeah - I was just thinking that since I'm augmenting the forms the same way across the site I should be using a directive - augmenting HTML, newsletter component. Switched to ng-controller and it worked like a charm, thanks heaps. How do I credit you? – Harley Alexander Oct 27 '15 at 13:19
  • Just submitted an answer, which summarizes what we have discussed here. – LordTribual Oct 27 '15 at 13:28
  • Any progress with your architecture? – LordTribual Oct 28 '15 at 16:54

1 Answers1

0

I would recommend to either think in components, e.g. 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, e.g. use your directive like so:

<newsletter-component></newsletter-component>
LordTribual
  • 4,219
  • 2
  • 28
  • 38