0

タッチ イベントが発生しない、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および touch イベントで何か不足していますか?

4

1 に答える 1

0

ニュースレターコンポーネントなどのコンポーネントで考えるか、ロジックを外部コントローラーに配置することをお勧めします。ディレクティブ外のディレクティブ コントローラーにアクセスしようとしています。これは不可能です。機能のコンポーネントを作成し、すべてのロジックをそのコントローラー内に配置することをお勧めします。また、テンプレートを提供することを忘れないでください。これで、上記のコードで を使用したときと同じように、コンポーネントのコントローラーにアクセスできますcontrollerAs: 'subscribe'。

マークアップを別のファイルに入れるか、インライン テンプレートを使用します。ただし、私の意見では、テンプレートを別のファイルに入れると、ディレクティブが読みやすくなります。

次に、たとえば次のようにディレクティブを使用します。

<newsletter-component></newsletter-component>
于 2015-10-27T13:28:02.730 に答える