AngularJSとJQueryがうまく動作しないng-showが動作しない

jqueryカレンダーを含むページがあり、その下にいくつかのイベントが送信されます。フォームバリデーションのためにangularjsを使うことに決めてから、AngularJSとJQueryがうまく動作しないng-showが動作しない

問題は、私のエラーメッセージp要素が表示を失うことはないということです。

jqueryスクリプトの宣言を削除しても動作しますが、カレンダーはなくなりました。

私はトップに移動したので、下にjqueryのスクリプトがありますが、違いはありません。

このような単純な修正が必要なようですが、わかりやすいと思います。

ここはフォーム要素の1つです。

<div> 
 
    <input type="text" name="authorname" placeholder="Author Name" ng-model="book.authorname" ng-required="true"> 
 
    <p class="error" ng-show="authorname.$invalid && authorname.$touched"> 
 
    You must fill out your author name.</p> 
 
</div>

出典

2016-12-08 tylerbarton

私は完全に角度削除していますので、私のサイトの大部分はjqueryの重いためのjQueryと角度との間の干渉がちょうどNG-ショーの問題よりも深いことを私が発見しました。お手伝いをしてくださった皆様、ありがとうございます！ – tylerbarton

角度の検証は、フォームだけで動作します。フォーム外で検証を使用する場合は、ng-formを先頭のコンテナに宣言する必要があります。

(function(angular) { 
 
    'use strict'; 
 
    angular.module('Example', []) 
 
    .controller('ExampleController', ['$scope', function($scope) { 
 
     $scope.test = function(){} 
 
    }]); 
 
})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="Example"> 
 
    <div ng-controller="ExampleController" > 
 
     <form name="bookForm"> 
 
     <input type="email" name="authorname" ng-model="book.authorname" ng-required="true" /> 
 
     <input type="text" ng-click="test()" placeholder="Test" /> 
 
     <p class="error" ng-show="bookForm.authorname.$invalid"> 
 
    You must fill out your author name.</p> 
 
     </form> 
 
    </div> 
 
    </body>

出典

2016-12-08 02:59:14

アンソニーCの入力をありがとう。すべての要素はフォームタグにあります。コードを表示する要素を1つ追加しました。 jqueryからの干渉があるはずです。私はjquery $ httpを扱うことについて何かを読んだので、角の更新は見逃されていますか？それについては確かではありません。 – tylerbarton

@TyBなので、実際のng-show文にはフォーム名がありますか？ 'ng-show =" YourFormName.authorname。$ invalid && "' –

いいえ、私はトップレベルのフォームタグを持っています。これは私が要素のコーディング方法を示したものです。 – tylerbarton

AngularJSとJQueryがうまく動作しないng-showが動作しない

答えて

関連する問題