javascript - Failed to load template ( 404 ) from angular Directive in Typescript class - Stack Overflow

admin管理员组

文章数量:1429336

Following is my code for angular Directive written in typescript class. When i run the directive in browser. I get error as

Failed to load template: ../Templates/inputcontrol.html (HTTP status: 404 Not Found) - Error: $pile:tpload Error Loading Template

Im using asp mvc

How to set the path or templateUrl in angular ?

<input-control a="shan"></input-control>

Although the relative path is fine.

  class InputControl implements ng.IDirective {
    restrict = "E";
    scope = {
        a: "=a"
    };
    templateUrl = "../Templates/inputcontrol.html";       
    controller = ["$scope", ($scope: any) => {
        console.log("this this controller", $scope.a);
    }];
    controllerAs = "inputcontroller";
  constructor(private $location: ng.ILocationService) {
    }
    link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => {
        console.log(this.$location);
    };
    static factory(): ng.IDirectiveFactory {
        const directive = ($location: ng.ILocationService) => new InputControl($location);
        directive.$inject = ["$location"];
        return directive;
    }
}
angular.module("SheetApp").directive("inputControl", InputControl.factory());

Following is my code for angular Directive written in typescript class. When i run the directive in browser. I get error as

Failed to load template: ../Templates/inputcontrol.html (HTTP status: 404 Not Found) - Error: $pile:tpload Error Loading Template

Im using asp mvc

How to set the path or templateUrl in angular ?

<input-control a="shan"></input-control>

Although the relative path is fine.

  class InputControl implements ng.IDirective {
    restrict = "E";
    scope = {
        a: "=a"
    };
    templateUrl = "../Templates/inputcontrol.html";       
    controller = ["$scope", ($scope: any) => {
        console.log("this this controller", $scope.a);
    }];
    controllerAs = "inputcontroller";
  constructor(private $location: ng.ILocationService) {
    }
    link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => {
        console.log(this.$location);
    };
    static factory(): ng.IDirectiveFactory {
        const directive = ($location: ng.ILocationService) => new InputControl($location);
        directive.$inject = ["$location"];
        return directive;
    }
}
angular.module("SheetApp").directive("inputControl", InputControl.factory());

• javascript
• angularjs
• asp-mvc
• angularjs-directive
• typescript

Share Improve this question Follow edited Dec 13, 2015 at 19:45 Shan Khan asked Dec 13, 2015 at 18:47 Shan KhanShan Khan 10.4k1818 gold badges6969 silver badges114114 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Don't use relative pathing - rather, path according to how you'd expect to retrieve the element from your server if you were doing a Get request.

Assuming AngularApp is at the top level of your project (same tree-indentation as say the Controllers or Scripts folders are by default), use the following for your templateURL rather than relative pathing.

"/AngularApp/Templates/main.html"

I made it work by changing the code like this.

class InputControl implements ng.IDirective {


    restrict = "E";
    scope = {
        a: "="
    };
    templateUrl = "";
    controller = ["$scope", ($scope: any) => {
        console.log("this this controller", $scope.a);
    }];

    controllerAs = "inputcontroller";

    constructor(private $location: ng.ILocationService , private $sce:ng.ISCEService) {
        var a : InputControl = this;
        a.templateUrl=$sce.trustAsUrl("http://"+window.location.host +"/AngularApp/Templates/inputcontrol.html");
    }

    link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => {
        console.log(this.$location);
    };

    static factory(): ng.IDirectiveFactory {
        const directive = ($location: ng.ILocationService , $sce : ng.ISCEService) => new InputControl($location,$sce);
        directive.$inject = ["$location","$sce"];
        return directive;
    }
}

angular.module("SheetApp").directive("inputControl", InputControl.factory());

It's worked for me when I changed only:

templateUrl: "http://" + window.location.host + "/AngularApp/Templates/inputcontrol.html"

本文标签： javascriptFailed to load template ( 404 ) from angular Directive in Typescript classStack Overflow