ng-submit 不触发角触摸/触摸事件答案

【问题标题】：ng-submit not firing with angular-touch / touch eventsng-submit 不触发角触摸/触摸事件
【发布时间】：2015-10-27 21:28:02
【问题描述】：

我有一个奇怪的问题，触摸事件没有触发 ng-submit 或 ng-click（在 chrome 设备开发工具中）。 Chrome 开发工具模拟 touchstart/touchend 事件，所以我不确定为什么这不起作用。它在桌面上运行良好。

给定以下 HTML 表单：

<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>

还有以下指令/控制器：

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');
    }
}

控制台日志从不注册。它在桌面上运行良好。奇怪的是 ng-submitted 类被添加到表单中。

我是否缺少 ng-submit 和触摸事件的内容？

【问题讨论】：

您的ng-submit 中的subscribe 是什么？您是否尝试在指令之外访问指令控制器？您的指令没有模板，并且控制器仅可用于require 控制器的模板或指令。
subscribe 是控制器指令的 controllerAs 语法。我宁愿远离模板，只附加 js 功能，因为每个订阅的布局都不同，具体取决于它在网站上的位置（有时是 1 列，有时是 2 列）
这是不可能的。要么使用模板，要么将逻辑放在指令之外的控制器中。
好的，所以使用ng-controller="SubscribeController" 代替指令的控制器？
是的，你为什么还需要指令？到目前为止，您只添加了类，提交操作也可以在您的控制器中处理。我不想告诉你指令不好，事实恰恰相反，但是你必须考虑组件并制作一个时事通讯小部件，可以这么说。然后你的指令有一个模板和它自己的控制器。

标签： javascript angularjs ng-submit angularjs-ng-touch

【解决方案1】：

我建议要么考虑组件，例如通讯组件或将您的逻辑放在外部控制器中。您正在尝试访问指令之外的指令控制器。这是不可能的。我建议为您的功能创建一个组件并将所有逻辑放在其控制器中。还记得提供一个模板。现在您可以像在上面的代码中使用controllerAs: 'subscribe' 一样访问组件的控制器。

将您的标记放在单独的文件中或使用内联模板。但是，在我看来，将模板放在单独的文件中会使您的指令更具可读性。

然后，例如像这样使用你的指令：

<newsletter-component></newsletter-component>

【讨论】：