Question

我正在将AngularJS 1.5.10和jQuery 2.2.4与webpack一起使用。如建议中所述，我添加了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

有人可以帮我解决吗？

Answer 1

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

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

调用：

$ npm install expose-loader --save-dev

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

import 'expose-loader?jQuery!jquery';

Answer 2

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

来代替document.querySelector('#username');

如以下documentation for angular.element

中的注释所建议

注意：请记住，此函数将无法通过标签名称/ CSS选择器找到元素。对于按标签名称进行的查找，请改用angular.element（document）.find（...）或$ document.find（），或使用标准的DOM API，例如document.querySelectorAll（）。

jqLit​​e不支持通过选择器查找元素

2 个答案:

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