input:not([type="checkbox"]) 在 angular 测试中不工作

Question

下面是我在 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

Answer 1

Angular使用的jQueryLite，find()方法仅限于通过标签名查找，所以不能使用:not 就像在完整的 jQuery 图书馆中一样....

另一种方法是编写一个小方法来过滤输入类型。

供参考，这是 find() 上的 Angular Documentation。

Answer 2

AngularJs 使用 jQlite 进行 DOM 操作，它是 jQuery DOM 操作库的轻量级实现。问题是 jQlite 不支持那些复杂的选择器，根据 docs:

find() - Limited to lookups by tag name

angular.element - Keep in mind that this function will not find elements by tag name / CSS selector. For lookups by tag name, try instead angular.element(document).find(...) or $document.find(), or use the standard DOM APIs, e.g. document.querySelectorAll().

因此，如果您想使用复杂的选择器，您可以使用 jQuery 代替，或者使用 documento.querySelector().

要将 AngularJs 与 jQuery 一起使用而不是 jQlite，您可以使用 ngJq 指令，这样 angular 将查找 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);

input:not([type="checkbox"]) 在 angular 测试中不工作

input:not([type="checkbox"]) not working in angular test

javascript

angularjs

karma-mocha