Question

我有一个名为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>

Answer 1

修改

如果您只是关心获取网站的根/网址，以便您可以附加该网址以获取您所使用的其他网址，则可以使用/作为网址的第一个字符。

var getUsersUrl = "/api/users";

使用MVC帮助程序方法构建相对URL的替代方法。

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

您不应该像这样对应用程序基本路径进行硬编码。您可以在剃刀视图中使用Url.Content或Url.RouteUrl辅助方法生成应用基础的网址。无论您当前的页面/路径如何，它都会正确构建网址。一旦获得此值，请将其分配给javascript变量并在其他js代码中使用该变量来构建其他网址。这样做时务必使用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"); } } } }); })();

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

}）（）;

AngularJS指令：“templateUrl”在“模板”工作时不起作用

2 个答案: