Search code examples
jqueryangularjsonsen-uimonaca

When I develop my hybird app using angularjs and onsen ui ,there is a bug about Error;[jqLite:nosel]

I want to define a direcrive, the code as follows:

var module = ons.bootstrap('my-app', ['onsen','ngSanitize']);

module.directive("dyCompile", ["$compile", function($compile) {
    return {
        restrict: 'EA',
        link: function(scope, elm, iAttrs) {
            var DUMMY_SCOPE = {
                    $destroy: angular.noop
                },
                root = elm,
                childScope,
                destroyChildScope = function() {
                    (childScope || DUMMY_SCOPE).$destroy();
                };

            iAttrs.$observe("html", function(html) {
                destroyChildScope();
                childScope = scope.$new(false);
                var content = $compile(html)(childScope);
                root.replaceWith(content);
                root = content;

                scope.$on("$destroy", destroyChildScope);
            });
        }
    };
}])

And HTML is like this :

<div class="arInfo">
        <dy-compile html="bodyText">
        </dy-compile>
</div>

and the head is :

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script> 

<script src="./js/jquery-2.1.4.js"></script>

<script src="./js/angular-sanitize.js"></script>
<script src="./js/winstore-jscompat.js"></script>    

<script src="./js/script.js"></script>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.js'></script>
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.css' type='text/css' media='all' />
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">    
<link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">

but when I run my app, there is error : "Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element "

I think maybe the reason for this is the sequence of loading angularjs and jquery is incorrect, but as you see, I load jquery first, I really do not know the reason for this, anybody can help me ?

Solution

  • I don't see your load of 'angular.js'. Is it being done by the 'components/loader.js' script?

    In that case it, you are loading 'angular.js' before the load of jQuery which would cause the jqLite error.

    Put the load of jQuery above the load of 'components/loader.js'