javascript 使用 ng-include 导致未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24249684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using ng-include result in undefined
提问by aleczandru
Hi I am fairly new to angular and i have just started my first app with it.Here is what I have done so far.This is my index file:
嗨，我对 angular 还很陌生，我刚刚用它开始了我的第一个应用程序。这是我到目前为止所做的事情。这是我的索引文件：
<body ng-app="codeArt">
<div ng-controller="loginCtrl">
<ng-include src="/App/scripts/login/login.html"></ng-include>
</div>
<!-------------- Angular Libs ---------------------->
<script src="/App/libs/angular/angular.js"></script>
<!--------------- Code Art Main Module -------------->
<script src="/App/scripts/codeArt.js"></script>
<!--------------- Code Art Login Module -------------->
<script src="/App/scripts/login/login.js"></script>
</body>
The index file is stored in Views/Home/Index.cshtml. This will be the only file stored here and it is needed because I used ASP.NET MVC.
索引文件存储在 Views/Home/Index.cshtml 中。这将是存储在这里的唯一文件，因为我使用了 ASP.NET MVC，所以需要它。
I defined my main module in App/scripts/codeArt.js:
我在 App/scripts/codeArt.js 中定义了我的主模块：
var codeArt = angular.module("codeArt", [
'codeArt.login'
]);
I then created an aditional module that will contain functionalities related to login and registration App/scripts/login/login.js
然后我创建了一个附加模块，其中包含与登录和注册相关的功能 App/scripts/login/login.js
var login = angular.module('codeArt.login', [])
I defined a controller in App/scripts/login/controllers/loginCtrl.js:
我在 App/scripts/login/controllers/loginCtrl.js 中定义了一个控制器：
login.controller('loginCtrl', function($scope){
$scope.name = "Nistor Alexandru";
$scope.clicked = function(){
alert("I was clicked");
}
});
I also defined the main view for the login page in App/scripts/login/login.html and it lookslike this:
我还在 App/scripts/login/login.html 中定义了登录页面的主视图，它看起来像这样：
<section>
<div>{{name}}</div>
<button ng-click="clicked()">Clicked Alert!</button>
</section>
As it can be seen from my index.cshtml file I tryed using the ng-include to load the login.html file.For some reason when I run the app I can only find a comment that says ng-include: undefined and the html is not loaded.
从我的 index.cshtml 文件中可以看出，我尝试使用 ng-include 加载 login.html 文件。出于某种原因，当我运行该应用程序时，我只能找到一条评论说 ng-include: undefined 和 html未加载。
I wil be integrating routing at some point but for now I want to understand why this is not working correctly?
我将在某个时候集成路由，但现在我想了解为什么这不能正常工作？
I have also tryed this path ../../App/scripts/login/login.html asuming it will lok for files relaive to index.cshtml file but that was not the case.
我也尝试过这个路径 ../../App/scripts/login/login.html 假设它会查找与 index.cshtml 文件相关的文件，但事实并非如此。
回答by lucuma
The ng-include should be like this, you are missing a quote:
ng-include 应该是这样的，你缺少一个引号：
<ng-include src="'/Content/App/scripts/login/login.html'"></ng-include>
Angular expression evaluating to URL. If the source is a string constant, make sure you wrap it in single quotes, e.g. src="'myPartialTemplate.html'".
对 URL 求值的角度表达式。如果源是字符串常量，请确保将其用单引号括起来，例如 src="'myPartialTemplate.html'"。
https://docs.angularjs.org/api/ng/directive/ngInclude
https://docs.angularjs.org/api/ng/directive/ngInclude
** Old Answer **
** 旧答案 **
I'd suggest you place your static html files inside the contentfolder or create some routing to return them from say a controller. It should work out of the box inside the content folder:
我建议您将静态 html 文件放在content文件夹中，或者创建一些路由以从控制器返回它们。它应该在内容文件夹中开箱即用：
<ng-include src="/Content/App/scripts/login/login.html"></ng-include>
Or you might consider creating a TemplateControllerand then you might be able to return the view based on the name of the file you are requesting (don't forget to setup a route):
或者您可以考虑创建一个TemplateController，然后您可以根据您请求的文件的名称返回视图（不要忘记设置路由）：
<ng-include src="'/Template/get/whatever'"></ng-include>
public ActionResult Get(string name )
{
return View(name); // return View(name + ".cshtml")
}
This assumes you have a folder inside /Views/Template/with the name whatever.cshtml. I think the benefit to using a controller is they are proxied via your controller (you can modify folder structures later and easily update the reference in the controller) and possibly pass them some server side data, but depends on your requirements.
这假设您有一个/Views/Template/名为的文件夹whatever.cshtml。我认为使用控制器的好处是它们通过您的控制器代理（您可以稍后修改文件夹结构并轻松更新控制器中的引用）并可能向它们传递一些服务器端数据，但这取决于您的要求。
回答by Nico
ngInclude are relative links, so you have to use a relative path : ../Content/[...]
ngInclude 是相对链接，因此您必须使用相对路径：../Content/[...]
