1

So I have a custom directive that makes an http get requests and displays on a another template. But it doesn't display anything

The documentdisplay.js file where i have created the directive

/**
 * @author Karan Shah
 * 
 */

var documentDisplayModule = angular.module('ald.documentdisplay',[]);


documentDisplayModule.factory('documentDisplayAPI',function(){
    var fac ={};

    fac.getContents = function($http,docName){
        return $htp({
            method: 'GET',
            url: "/document/getContents/docName?="+docName
        });
    };
    return fac;

});


documentDisplayModule.directive('doccontent', function () {
    return {
        restrict: 'EA',
        scope: {},
        replace: true,
        link: function ($scope, element, attributes) {
        },
        controller: function ($scope, $http,$routeParams, documentDisplayAPI) {

            documentDisplayAPI.getContents($http,$routeParams.doc).success(function(data,status){

                $scope.textofdocument = data;
            }).error(function(data,status){
                if (404==status){
                    alert("no text");
                } else {
                    alert("bad stuff!");
                }
            });            
        },
        templateUrl: "documentcontent.html"
    };
});

The html page where I am calling it

<!-- @author Karan Shah -->
<body>
    <div>
        <h1>Document Display Contents</h1>
        <doccontent/>


    </div>
</body>

and the templateUrl the documentcontent.html which has the display

<body>
<div>
    Hello World
    <div>
        <a href="#/documents">Back to the List of Documents</a>
    </div>
    <br>    
    {{textofdocument}}
</div>
</body>

error that I am getting :

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element
http://errors.angularjs.org/1.2.21/jqLite/nosel
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:78:12
    at JQLite (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:2365:13)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:6816:27
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:8074:11
    at deferred.promise.then.wrappedCallback (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:11520:81)
    at deferred.promise.then.wrappedCallback (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:11520:81)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:11606:26
    at Scope.$RootScopeProvider.$get.Scope.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:12632:28)
    at Scope.$RootScopeProvider.$get.Scope.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:12444:31)
    at Scope.$RootScopeProvider.$get.Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:12736:24)

The content is not displayed. I am not sure what is wrong here. Thanks

Karan Shah
  • 17
  • 7
  • There is a typo in the factory: `return $htp` – Malk Sep 05 '14 at 17:34
  • I think that you shouldn't use $http inside a directive. Directives are made to manipulate the DOM. To retrive data from server, or send data to server you use $http inside a controller or a server. – Callebe Sep 05 '14 at 17:39
  • well the spell correction didnt makae it run. I do have the $http inside the directive inside controller. I have another page which runs properly with the same situation. No idea why this one is not working. – Karan Shah Sep 05 '14 at 17:51
  • Can you do a little more debugging and explanation? Is your directive getting called (add some `console.log`s in your link and controller functions)? In the network tab is a request happening? What are you getting back? As a side note you shouldn't have a body tag in your template... – Jason Goemaat Sep 05 '14 at 18:02
  • In the network tab the status is OK. However my directive never got called. – Karan Shah Sep 05 '14 at 18:08
  • ALso i am getting this error in the console which I dont know what it means Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element – Karan Shah Sep 05 '14 at 18:08
  • Solution : http://stackoverflow.com/questions/13480796/error-selectors-not-implemented – Karan Shah Sep 05 '14 at 18:24
  • The error seems pretty self explanatory. My guess is that `documentDisplayAPI` is using jquery selectors somewhere. – Jason Goemaat Sep 08 '14 at 09:28

1 Answers1

0

Controller inside directives must be used in this way

controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... }

In your case $element is injected with name $http. When you are trying to invoke a rest call using $http it is actually trying to call the get method on $element and hence you are getting Error: [jqLite:nosel] Try changing the controller to this

controller: function($scope, $element, $attrs, $transclude, $http, $routeParams, documentDisplayAPI) { ... }

Also you need not pass $http to your factory instead you can directed inject in the factory

 documentDisplayModule.factory('documentDisplayAPI',function($http){
Siraj
  • 687
  • 4
  • 7