Вход: не ([type="checkbox"]) не работает в угловом тесте

Ниже мой скомпилированный шаблон в функции 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);

Почему ниже метод поиска возвращает мне пустые результаты?

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
Источник

2 ответа

Решение

JQueryLite, который использует Angular, find() метод ограничен поиском по имени тега, поэтому вы не можете использовать :not здесь, как вы бы в полной библиотеке JQuery....

Альтернативой может быть написание небольшого метода для фильтрации типов ввода.

Для справки, вот угловая документация на find(),

Источник

AngularJs использует jQlite для манипулирования DOM, что является облегченной реализацией библиотеки манипулирования DOM jQuery. Проблема в том, что jQlite не поддерживает эти сложные селекторы, согласно документации:

find() - Ограничен поиском по имени тега

angular.element - Имейте в виду, что эта функция не найдет элементы по имени тега / селектору CSS. Для поиска по имени тега, попробуйте вместо angular.element(document).find(...) или же $document.find() или используйте стандартные API DOM, например document.querySelectorAll(),

Поэтому, если вы хотите использовать сложный селектор, вы можете вместо этого использовать jQuery или использовать documento.querySelector(),

Для использования AngularJs с jQuery вместо jQlite, вы можете использовать ngJq директива, таким образом, угловой будет выглядеть window.jQuery вместо его внутреннего jQlite.

<!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);
Источник
Другие вопросы по тегам