Question

我有一个奇怪的问题，触摸事件没有触发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并触摸事件的内容吗？

Answer 1

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

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

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

<newsletter-component></newsletter-component>

ng-submit不使用角度触摸/触摸事件触发

1 个答案: