AngularJS指令：＆QUOT; templateUrl＆QUOT;不工作，而与QUOT;模板＆QUOT;作品 [英] AngularJS directive: "templateUrl" doesn't work while "template" works

问题描述

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

我是什么在这里失踪？

服务器端：ASP.NET MVC 5

客户端：AngularJS 1

来源$ C ​​$ c是可以 rel=\"nofollow\">在github上。

项目结构

 根
    脚本
        app.js
        指令
            area1.js
        模板
            area1.html
    意见
        家
            Index.cshtml
 

Index.cshtml

  @ {
    ViewBag.Title =指数;
}
@section脚本{
    ＆LT;脚本SRC =〜/脚本/ angular.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =〜/脚本/ app.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =〜/脚本/指令/ area1.js＆GT;＆LT; / SCRIPT＆GT;
}
＆LT; H2＆GT;指数＆LT; / H＆GT;
＆LT; D​​IV NG-应用=应用程序＆GT;
    ＆LT;区域一体化＆GT;＆LT; /区一＆GT;
＆LT; / DIV＆GT;
 

app.js

 （函数（）{    angular.module（应用程序，[]）;}）（）;
 

area1.js

 （函数（）{
    angular.module（应用程序）
        .directive（一区功能（）{
            返回{
                限制：'E'，
                templateUrl：〜/模板/ area1.html'，
                控制器：函数（$范围）{
                    $ scope.button1Click =功能（）{
                        警报（Button1的点击）;
                    }
                }
            }
        }）;
}）（）;
 

area1.html

 ＆LT; D​​IV＆GT;
    ＆LT;按钮ID =Button1的NG点击=button1Click（）＆GT;按键1 LT; /按钮＆GT;
＆LT; / DIV＆GT;
 

解决方案

由于模板URL路径是错误的！像剃刀做JavaScript不能转换您的〜来应用的基本路径。你应该可以看到一个404错误，如果你检查你的浏览器的网络选项卡。

您应该不难code一样，您的应用程序基本路径。您可以使用 Url.Content 或 Url.RouteUrl 在你的Razor视图生成的URL应用辅助方法基础。它会照顾构建正确的URL，无论你目前的网页/ path.Once你得到这个值，将其分配给一个JavaScript变量和使用，在你的其他的js code来构建其他URL。始终确保这样做时，使用JavaScript命名空间，以避免与全局JavaScript变量可能存在的问题。

因此​​，在您的Razor视图（版式文件或特定视图），可以做到这一点。

 ＆LT;脚本＆GT;
    VAR对myApp = MyApp来|| {};
    myApp.Urls = myApp.Urls || {};
    myApp.Urls.baseUrl ='@ Url.Content（〜）';
＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =〜/脚本/ AngularControllerForPage.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
    VAR一个= angular.module（应用程序）值（的appSettings，对myApp）。
＆LT; / SCRIPT＆GT;
 

而在你的角度控制器/文件，您可以访问它像

  VAR应用= angular.module（应用程序，[]）;
VAR CTRL =功能（的appSettings）{    VAR VM =这一点;    vm.baseUrl = appSettings.Urls.baseUrl;
    //构建现在使用的基本URL其他URL
    VAR getUsersUrl = vm.baseUrl +API /用户;
    的console.log（getUsersUrl）;};
app.controller（CTRLCTRL）
 

您可以并且应该访问该在你的数据服务，指令等。

 （函数（）{
    angular.module（应用程序）
        .directive（一区功能（的appSettings）{
            返回{
                限制：'E'，
                templateUrl：appSettings.Urls.baseUrl +'/模板/ area1.html'，
                控制器：函数（$范围）{
                    $ scope.button1Click =功能（）{
                        警报（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>

解决方案

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指令：＆QUOT; templateUrl＆QUOT;不工作，而与QUOT;模板＆QUOT;作品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！