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);

为什么以下的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

Answer 1

Angular使用的jQueryLite，Template.reportsSummary.onCreated(function () { this.subscribe('appointments.day.patients'); });方法仅限于按标记名称查找，因此您不能像在完整的jQuery库中那样使用find()。 ...

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

供参考，这是:not上的Angular Documentation。

Answer 2

AngularJs使用jQlite进行DOM操作，这是jQuery DOM操作库的轻量级实现。根据{{3}}：

，问题是jQlite不支持那些复杂的选择器

find() - 仅限于按标记名称
进行查找
angular.element - 请记住，此函数不会按标记名称/ CSS选择器查找元素。对于按标记名称进行查找，请尝试使用angular.element(document).find(...)或$document.find()，或使用标准DOM API，例如document.querySelectorAll()。

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

为了将AngularJs与jQuery而不是jQlite一起使用，你可以使用docs指令，这样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);

输入：not（[type =“checkbox”]）不在角度测试中工作

2 个答案: