2016-11-25 13 views
0

以下の角度テストで動作していないではないがbeforeEach機能の私のコンパイルテンプレート入力:([タイプ=「チェックボックス」])

template = '<form name="configForm">' + 
        '<input type="number"/>' + 
        '<input type="checkbox"/>' + 
        '<input type="text"/>' + 
        '<div class="form-error" ng-show="configForm.$error.max">Error</div>' + 
        '</form>'; 
element = angular.element(template); 
element = $compile(element)($scope); 

はなぜ空の結果を返すfindメソッドを下回っているのですか?

var dirElementInput = element.find('input:not([type="checkbox"])'); 
console.log(dirElementInput); 
console.log(dirElementInput.length); 

しかし、私はこのようにそれを使用する場合、それは動作します:

var dirElementInput = element.find('input'); 
console.log(dirElementInput); 
console.log(dirElementInput.length); 

Object{0: <input type="number">, 1: <input type="checkbox">, 2: <input type="text">, length: 3} 

LOG: 3 

答えて

1

jQueryLite角度の用途は、find()方法は、タグ名によって発見に制限ですので、あなたがここに:notを使用することはできませんあなたは完全なjQueryライブラリのようになります....

代わりに、入力方法をフィルタリングするための小さなメソッドを書くことがあります。

参考として、はfind()です。

1

AngularJsは、jQuery DOM操作ライブラリの軽量実装であるDOM操作にjQliteを使用しています。問題はjQliteがdocsによると、これらの複雑なセレクタをサポートしていないということです。

find() - タグ名による検索に限る

angular.element - この関数は、タグによって要素を見つけることができませんことを覚えておいてください名前/ CSSセレクタ。タグ名による検索の場合は、代わりにangular.element(document).find(...)または$document.find()を入力するか、標準のDOM APIを使用してください(例: document.querySelectorAll()

したがって、複雑なセレクタを使用する場合は、代わりにjQueryを使用するか、documento.querySelector()を使用します。

jQliteの代わりにjQueryを使用する場合は、ngJqディレクティブを使用できます。この方法では、内部jQliteではなくwindow.jQueryになります。

<!doctype html> 
<html ng-app ng-jq="jQuery"> 
... 
... 
</html> 

または最後の場合には、必ずJavaScriptにフォールバックすることができます

var inputs = angular.element(document).find('input'); 

var nonCheckBoxArray = [].filter.call(elements, function(elm) { 
    return elm.type != 'checkbox'; 
}); 

var inputsNonCheckBox = angular.element(nonCheckBoxArray); 
関連する問題