jqLite 不支持通过选择器查找元素答案

【问题标题】：Looking up elements via selectors is not supported by jqLitejqLite 不支持通过选择器查找元素
【发布时间】：2018-12-14 13:31:18
【问题描述】：

我正在使用带有 webpack 的 AngularJS 1.5.10 和 jQuery 2.2.4。如建议中所述，我添加了 jQuery，然后添加了 AngularJS，但它无法解决此问题。

我收到如下控制台错误 -

我的 login.conroller.ts 文件看起来像

 import angular from 'angular';

(function() {
    'use strict';

    angular
        .module('demo')
        .controller('LoginController', LoginController);

    LoginController.$inject = ['$rootScope', '$state', '$timeout'];

    function LoginController ($rootScope, $state, $timeout) {
        var vm = this; $timeout(function (){angular.element('#username').focus();});
 }
})();

我的 main.ts 文件是

import 'jquery';
import 'angular';
import 'angular-resource';
import 'angular-animate';
import 'angular-aria';
import 'angular-cache-buster';
import 'angular-cookies';
import 'bootstrap';
import 'angular-sanitize';
import '@uirouter/angularjs';

[jqLite:nosel] jqLite 不支持通过选择器查找元素！见：http://docs.angularjs.org/api/angular.element

谁能帮我解决？

【问题讨论】：

如果不查看导致错误的代码，我们将无法帮助您

标签： jquery angularjs webpack

【解决方案1】：

问题描述含糊不清，但看起来 Angular 在全局范围内找不到正确的 jQuery 实例。加载 AngularJS 时，它会查找 window.jQuery，如果没有找到则回退到缺少选择器功能的内置替代方案。

我假设您正在使用 webpack 来构建您的资产。如果是这样，请考虑使用expose-loader。

调用：

$ npm install expose-loader --save-dev

然后在角度导入之前添加：

import 'expose-loader?jQuery!jquery';

【讨论】：

【解决方案2】：

基于您的代码无法找到 jQuery 的错误。另一种方法是使用标准 DOM API。因此，您可以使用 document.querySelector('#username'); 而不是 angular.element('#username')

正如documentation for angular.element下面给出的注释中所建议的那样

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

【讨论】：

document.querySelector 绝对WILL 按标签名称/ CSS 选择器查找元素。唯一的区别是它只会选择第一个元素。