javascript - Klarte ikke å laste mal ( 404 ) fra Angular-direktiv i Typescript-klasse

Følgende er min kode for Angular-direktiv skrevet i TypeScript-klasse. Når jeg kjører direktivet i nettleseren, får jeg feil som

Kunne ikke laste mal: ../Templates/inputcontrol.html (HTTP-status: 404 Ikke funnet) - Feil: $compile:tpload Feil ved lasting av mal

Jeg bruker asp.net mvc

Hvordan sette path eller templateUrl i Angular?

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

Selv om den relative banen er fin.

  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());

Svar #1

Ikke bruk relative stier - bruk heller stier i henhold til hvordan du ville forventet å hente elementet fra serveren din hvis du gjorde en Get-forespørsel.

Forutsatt at AngularApp er på øverste nivå i prosjektet ditt (samme tre-nivå som for eksempel Controllers- eller Scripts-mappene som standard), bruk følgende for din templateURL i stedet for relativ banestyring.

"/AngularApp/Templates/main.html"

Svar #2

Jeg fikk det til å fungere ved å endre koden slik.

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());