[asp.net-mvc]AngularJS 指令:"templateUrl"不在"模板"工作时的工作

发布时间: 2017/3/25 1:43:39
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有命名,AngularJS 指令 areaOne 。当我使用 template 模板显示,但是当我使用 templateUrl area1.js,在模板的 HTML 不会呈现。

在这里我错过了什么?

服务器端︰ ASP.NET MVC 5
客户端︰ AngularJS 1
源代码是可用在这里在 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>

解决方法 1:

编辑

如果你只是关心自己的本根 url 的网站,以便您可以追加,要想让其他的 url 你后,你可以简单地使用 / 作为您的 url 的第一个字符。

var getUsersUrl = "/api/users";

替代的方法,建立使用 MVC 的帮助器方法的相对 url。

因为模板 url 路径是错的 !Javascript 不能转换你 ~ 应用程序基路径像Razor一样做。你应该能够看到一个 404 错误,如果您检查您的浏览器网络选项卡。

不你硬应该像那样编码您的应用程序基路径。您可以使用 Url.ContentUrl.RouteUrl 您 razor 视图生成的 url 的应用程序基础的帮助器方法。它将照顾正确建设无论每个 path 当前的页的 url。一旦您获取此值,将其分配给一个 javascript 变量和其他 js 代码中使用,打造您的其他网址。始终确保使用 javascript 命名空间时这样做以避免全球 javascript 变量可能出现的问题。

所以在你 razor 视图中 (布局文件或特定的视图),你会这样做

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