(十七)JQuery框架一定要在angularJS之前加载

来源：互联网发布：homebrew mysql 编辑：程序博客网时间：2024/04/29 14:50

如果我们的web页面只引入angulrjs框架(不引入jQuery框架)，那么我们使用过程中可能会遇到如下错误：

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!

比如下面的代码，当我们点击injector按钮的时候，就会出现类似上面的错误。

错误代码1：

<html>  <head>    <script src="angular-1.2.25.js"></script>  <script>        var myModule = angular.module('myModule', []);  myModule.controller("ctrl_1",function($scope,$injector){$scope.test = function(){var t = angular.element("#btn").injector();alert(t==$injector);}});angular.element(document).ready(function() {              angular.bootstrap(document.getElementById("div1"),["myModule"]);          });          </script>  </head>  <body><div id="div1" ng-controller="ctrl_1"><input id="btn" type="button" value="injector" ng-click="test();"></input></div>    </body></html>

这是因为angular.element()这个API并不能支持类似jquery的选择器，也就是说angular.element()并不支持selector。最好引入JQuery框架，因为jQuery框架选择元素实在是太方便了。如果我们确实不想使用jQuery，那么可以使用HTML5中的document.querySelector()，这个API是支持选择器的。

正确代码1：

<html>  <head>    <script src="angular-1.2.25.js"></script>  <script>        var myModule = angular.module('myModule', []);  myModule.controller("ctrl_1",function($scope,$injector){$scope.test = function(){var t = angular.element(document.querySelector("#btn")).injector();alert(t==$injector);}});angular.element(document).ready(function() {              angular.bootstrap(document.getElementById("div1"),["myModule"]);          });          </script>  </head>  <body><div id="div1" ng-controller="ctrl_1"><input id="btn" type="button" value="injector" ng-click="test();"></input></div>    </body></html>

有一点特别需要注意：如果页面中使用了jQuery和angular，那么一定要先加载jQuery框架，然后再加载angular。

下面的代码我们先加载angular后加载jQuery，当点击injector的按钮的时候，会报错:

TypeError: $(...).injector is not a function

错误代码2：

<html>  <head>    <script src="angular-1.2.25.js"></script>  <script src="jquery-1.11.1.min.js"></script><script>        var myModule = angular.module('myModule', []);  myModule.controller("ctrl_1",function($scope,$injector){$scope.test = function(){var t = $("#btn").injector();alert(t==$injector);}});$(function(){angular.bootstrap($("#div1")[0], ["myModule"]);  })</script>  </head>  <body><div id="div1" ng-controller="ctrl_1"><input id="btn" type="button" value="injector" ng-click="test();"></input></div>    </body></html>

如果我们先加载jQuery后加载angular，那么就不会有问题。这是因为如果angular加载的时候没有找到jQuery框架，那么会使用它自带的jqlite，这样angular就不能将injector()、scope()等方法注入到jQuery对象中。

正确代码2：

<html>  <head><script src="jquery-1.11.1.min.js"></script>    <script src="angular-1.2.25.js"></script>  <script>        var myModule = angular.module('myModule', []);  myModule.controller("ctrl_1",function($scope,$injector){$scope.test = function(){var t = $("#btn").injector();alert(t==$injector);}});$(function(){angular.bootstrap($("#div1")[0], ["myModule"]);  })</script>  </head>  <body><div id="div1" ng-controller="ctrl_1"><input id="btn" type="button" value="injector" ng-click="test();"></input></div>    </body></html>

0 0