javascript - AngularJS 指令 : "templateUrl" doesn't work while "template" works

Question

我有一个名为 areaOne 的 AngularJS 指令。当我使用 template 时，会显示模板，但当我在 area1.js 中使用 templateUrl 时，不会呈现模板 HTML。

我在这里错过了什么？

服务器端:ASP.NET MVC 5
客户端:AngularJS 1
源代码可用here在 github 上。

项目结构:

Root
    Scripts
        app.js
        directives
            area1.js
        templates
            area1.html
    Views
        Home
            Index.cshtml

Index.cshtml

@{
    ViewBag.Title = "Index";
}
@section Scripts{
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/app.js"></script>
    <script src="~/Scripts/directives/area1.js"></script>
}
<h2>Index</h2>
<div ng-app="app">
    <area-one></area-one>
</div>

app.js

(function() {

    angular.module("app", []);

})();

area1.js

(function() {
    angular.module("app")
        .directive("areaOne", function() {
            return {
                restrict: 'E',
                templateUrl: '~/templates/area1.html',
                controller: function ($scope) {
                    $scope.button1Click = function () {
                        alert("button1 clicked");
                    }
                }
            }
        });
})();

area1.html

<div>
    <button id="button1" ng-click="button1Click()">Button 1</button>
</div>

Answer 1

编辑

如果您只关心获取站点的根/基本 url，以便您可以附加它以获取您之后的其他 url，您可以简单地使用 / 作为 url 的第一个字符.

var getUsersUrl = "/api/users";

---

使用 MVC 辅助方法构建相对 URL 的替代方法。

因为模板url路径错误! Javascript 无法像 razor 那样将您的 ~ 转换为应用程序基本路径。如果您检查浏览器的网络选项卡，您应该能够看到 404 错误。

你不应该像那样硬编码你的应用程序基本路径。您可以在 razor View 中使用 Url.Content 或 Url.RouteUrl 辅助方法来生成应用程序库的 url。无论您当前的页面/路径如何，它都会正确构建 url。获得此值后，将其分配给 javascript 变量并在其他 js 代码中使用它来构建其他 url。这样做时始终确保使用 javascript 命名空间，以避免全局 javascript 变量可能出现的问题。

所以在你的 Razor View (布局文件或特定 View )中，你可以这样做

<script>
    var myApp = myApp || {};
    myApp.Urls = myApp.Urls || {};
    myApp.Urls.baseUrl = '@Url.Content("~")';       
</script>
<script src="~/Scripts/AngularControllerForPage.js"></script>
<script>
    var a = angular.module("app").value("appSettings", myApp);
</script>

在你的 Angular Controller /文件中，你可以访问它，

var app = angular.module("app", []);
var ctrl = function (appSettings) {

    var vm = this;

    vm.baseUrl = appSettings.Urls.baseUrl;
    //build other urls using the base url now
    var getUsersUrl = vm.baseUrl + "api/users";
    console.log(getUsersUrl);

};
app.controller("ctrl", ctrl)

您可以而且应该在您的数据服务、指令等中访问它。

(function () {
    angular.module("app")
        .directive("areaOne", function (appSettings) {           
            return {
                restrict: 'E',
                templateUrl: appSettings.Urls.baseUrl+'/templates/area1.html',
                controller: function ($scope) {
                    $scope.button1Click = function () {
                        alert("button1 clicked");
                    }
                }
            }
        });
})();