无法从 Typescript 类中的角度指令加载模板（404）

Posted 2023-03-13

【中文标题】无法从 Typescript 类中的角度指令加载模板（404）

【英文标题】：Failed to load template ( 404 ) from angular Directive in Typescript class

【发布时间】：2016-03-19 05:13:23

【问题描述】：

以下是我用打字稿类编写的角度指令代码。 当我在浏览器中运行指令时。我得到错误

加载模板失败：../Templates/inputcontrol.html（HTTP 状态：404 未找到）- 错误：$compile:tpload 加载模板时出错

我正在使用 asp.net mvc

如何在angular中设置path或templateUrl？

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

虽然相对路径没问题。

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

【参考方案1】：

不要使用相对路径 - 而是根据您在执行 Get 请求时期望从服务器检索元素的方式来设置路径。

假设 AngularApp 位于项目的顶层（默认情况下，与 Controllers 或 Scripts 文件夹相同的树缩进），请将以下内容用于您的 templateURL，而不是相对路径。

"/AngularApp/Templates/main.html"

【讨论】：

im 使用 asp.net mvc ，我将如何设置一个简单的 html 角度模板的路由来获取请求。

【参考方案2】：

我通过像这样更改代码使其工作。

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

【参考方案3】：

仅当我更改时它对我有用：

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