Error: "Selectors not implemented"

Question

I'm having difficulty selecting an element with angular. I must be making some silly mistake:

function Root($scope) {     $scope.elem = angular.element('div'); }​ 

The error that results:

Error: selectors not implemented     at Error (<anonymous>)     at Object.JQLite [as element] (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:1523:13)     at new Root (http://fiddle.jshell.net/kzX9z/7/show/:28:27)     at invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:2795:28)     at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:2805:23)     at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:4621:24)     at $get.i (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:4200:17)     at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:117:20)     at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:4185:11)     at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3834:14) angular.js:5563 $get angular.js:5563 $get angular.js:4661 $get.Scope.$apply angular.js:7890 SNAKE_CASE_REGEXP angular.js:930 invoke angular.js:2788 bootstrap angular.js:928 angularInit angular.js:904 (anonymous function) angular.js:14397 trigger angular.js:1695 event.preventDefault angular.js:1930 forEach angular.js:110 eventHandler 

Reproduced in this fiddle

What am I doing wrong? I included jQuery. Isn't this supposed to work?

Answer 1

It's because jquery needs to be referenced before angular. JSFiddle registered Angular 1.0.2 FIRST and then the jquery verson you added as a resource.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> 

This way Angular knows it can use JQuery and not JQLite. Once you do this, the selector will work in angular.element()

Here's your fiddle, updated to reference the scripts in the right order (and altered slightly, see the comments)

If you don't have JQuery, you can select the DOM Element manually.

var div = document.querySelector('div'); $scope.elem = angular.element(div);