标签：angular和jquery加载顺序 获取injector和scope报错 jqlite和jquery差别
如果我们的web页面只引入angulrjs框架(不引入jQuery框架)，那么我们使用过程中可能会遇到如下错误：
Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!
错误代码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>下面的代码我们先加载angular后加载jQuery，当点击injector的按钮的时候，会报错:
TypeError: $(...).injector is not a function
<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>
正确代码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>
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：angular和jquery加载顺序 获取injector和scope报错 jqlite和jquery差别
原文地址：http://blog.csdn.net/aitangyong/article/details/48131575
