Question

所以我有一个自定义指令，它使http获取请求并显示在另一个模板上。但它没有显示任何内容

documentdisplay.js 文件，其中我创建了指令

/**
 * @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"
    };
});

html页面我称之为

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


    </div>
</body>

和 templateUrl documentcontent.html ，其中包含显示

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

我得到

错误：

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)

不显示内容。我不确定这里有什么问题。感谢

Answer 1

必须以这种方式使用Controller inside指令

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

在您的情况下$element注入名称$http。当您尝试使用$http调用其余呼叫时，它实际上是尝试在$element上调用get方法，因此您将获得Error: [jqLite:nosel] 尝试将控制器更改为此

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

此外，您无需将$ http传递给您的工厂，而是可以在工厂指导注入

 documentDisplayModule.factory('documentDisplayAPI',function($http){

自定义指令不显示任何角度js

1 个答案: