AngularJS 指令:“templateUrl"“模板"时不起作用作品 [英] AngularJS directive: "templateUrl" doesn't work while "template" works

问题描述

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

我在这里遗漏了什么?

服务器端:ASP.NET MVC 5
客户端:AngularJS 1
源代码可在 此处在 github 上获得.

项目结构:

根脚本应用程序.js指令区域1.js模板区域1.html观看次数家索引.cshtml

Index.cshtml

@{ViewBag.Title = "索引";}@section 脚本{<script src="~/Scripts/angular.js"></script><script src="~/Scripts/app.js"></script><script src="~/Scripts/directives/area1.js"></script>}<h2>索引</h2><div ng-app="app"><区域一></区域一>

app.js

(function() {angular.module("app", []);})();

area1.js

(function() {angular.module("应用程序").directive("areaOne", function() {返回 {限制:'E'，templateUrl: '~/templates/area1.html',控制器:函数($scope){$scope.button1Click = function () {alert("button1 被点击");}}}});})();

area1.html

<button id="button1" ng-click="button1Click()">按钮 1</button>

解决方案

编辑

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

var getUsersUrl = "/api/users";

<小时>

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

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

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

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

<script src="~/Scripts/AngularControllerForPage.js"></script><脚本>var a = angular.module("app").value("appSettings", myApp);

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

var app = angular.module("app", []);var ctrl = 函数(appSettings){var vm = 这个；vm.baseUrl = appSettings.Urls.baseUrl;//现在使用基本 url 构建其他 urlvar getUsersUrl = vm.baseUrl + "api/users";控制台日志(getUsersUrl)；};app.controller("ctrl", ctrl)

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

(函数(){angular.module("应用程序").directive("areaOne", function (appSettings) {返回 {限制:'E'，templateUrl: appSettings.Urls.baseUrl+'/templates/area1.html',控制器:函数($scope){$scope.button1Click = function () {alert("button1 被点击");}}}});})();

I have an AngularJS directive named, areaOne. When I use template the template is displayed but when I use templateUrl in area1.js, template HTML is not rendered.

What am I missing here?

Server side: ASP.NET MVC 5
Client side: AngularJS 1
Source code is available here on github.

Project structure:

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>

解决方案

Edit

If you simply care about getting the root/base url of the site so you can append that to get the other url you are after, you may simply use / as the first character of your url.

var getUsersUrl = "/api/users";

---

Alternate Approach to build the relative url using the MVC helper methods.

Because the template url path is wrong! Javascript cannot convert your ~ to app base path like razor do. You should be able to see a 404 error if you inspect your browser network tab.

You should not hard code your app base path like that. You may use the Url.Content or Url.RouteUrl helper methods in your razor view to generate the url to the app base. It will take care of correctly building the url regardless of your current page/path.Once you get this value, assign it to a javascript variable and use that in your other js code to build your other urls. Always make sure to use javascript namespacing when doing so to avoid possible issues with global javascript variables.

So in your razor view (Layout file or specific view), you may do this

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

And in your angular controllers/files, you can access it like,

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)

You can and should access this in your data services, directives etc.

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

这篇关于AngularJS 指令:“templateUrl"“模板"时不起作用作品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！