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

【问题标题】：Failed to load template ( 404 ) from angular Directive in Typescript class无法从 Typescript 类中的角度指令加载模板（404）
【发布时间】：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());

【问题讨论】：

标签： javascript angularjs asp.net-mvc angularjs-directive typescript

【解决方案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"

【讨论】：