AngularJS 指令：“templateUrl”不起作用，而“template”起作用答案

【问题标题】：AngularJS directive: "templateUrl" doesn't work while "template" worksAngularJS 指令：“templateUrl”不起作用，而“template”起作用
【发布时间】：2015-12-23 02:01:51
【问题描述】：

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

我在这里错过了什么？

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

项目结构：

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>

【问题讨论】：

Angular 将无法识别 templateUrl 路径中的波浪号。您需要手动解决它（参见stackoverflow.com/questions/7397939/…）。

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

【解决方案1】：

编辑

如果您只是关心获取站点的根/基本 url，以便您可以附加它以获取您所追求的另一个 url，您可以简单地使用 / 作为您的 url 的第一个字符。

var getUsersUrl = "/api/users";

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

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

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

所以在你的剃刀视图（布局文件或特定视图）中，你可以这样做

<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>

在您的角度控制器/文件中，您可以像这样访问它，

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

【讨论】：

谢谢@Shyju。这正是问题所在。传递设置对象似乎很麻烦，但是要解析 ASP.NET MVC 中的路径，我想这是唯一的方法...

【解决方案2】：

您可以在脚本顶部导入模板并将其用作“模板”，而不是“templateUrl”：

import area1 from '/templates/area1.html';

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

})();

【讨论】：