0

我有一个奇怪的问题,触摸事件没有触发ng-submitng-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触摸事件有关的东西吗?

4

1 回答 1

0

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

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

然后,例如使用您的指令,如下所示:

<newsletter-component></newsletter-component>
于 2015-10-27T13:28:02.730 回答