使用 ng-include 导致未定义

2023-12-31

您好,我对 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>

索引文件存储在Views/Home/Index.cshtml中。这将是此处存储的唯一文件,并且需要它,因为我使用了 ASP.NET MVC。

我在 App/scripts/codeArt.js 中定义了我的主模块:

var codeArt = angular.module("codeArt", [
    'codeArt.login'
]);

然后,我创建一个附加模块,其中包含与登录和注册相关的功能 App/scripts/login/login.js

var login =  angular.module('codeArt.login', [])

我在 App/scripts/login/controllers/loginCtrl.js 中定义了一个控制器:

 login.controller('loginCtrl', function($scope){
   $scope.name = "Nistor Alexandru";
   $scope.clicked = function(){
       alert("I was clicked");
   }
});

我还在 App/scripts/login/login.html 中定义了登录页面的主视图,如下所示:

<section>
    <div>{{name}}</div>
    <button ng-click="clicked()">Clicked Alert!</button>
</section>

从我的index.cshtml文件中可以看出,我尝试使用ng-include来加载login.html文件。出于某种原因,当我运行应用程序时,我只能找到一条注释,上面写着ng-include:undefined和html未加载。

我将在某个时候集成路由,但现在我想了解为什么它不能正常工作?

我也尝试过此路径 ../../App/scripts/login/login.html 假设它将查找与 index.cshtml 文件相关的文件,但事实并非如此。


ng-include 应该是这样的,你缺少一个引号:

<ng-include src="'/Content/App/scripts/login/login.html'"></ng-include>

计算 URL 的角度表达式。如果源是字符串常量,请确保将其用单引号引起来,例如src="'myPartialTemplate.html'"。

https://docs.angularjs.org/api/ng/directive/ngInclude https://docs.angularjs.org/api/ng/directive/ngInclude

** 旧答案 **

我建议你将静态 html 文件放在content文件夹或创建一些路由以从控制器返回它们。它应该在内容文件夹中开箱即用:

<ng-include src="/Content/App/scripts/login/login.html"></ng-include>

或者您可以考虑创建一个TemplateController然后您可能可以根据您请求的文件名返回视图(不要忘记设置路线):

<ng-include src="'/Template/get/whatever'"></ng-include>  

public ActionResult Get(string name )
{
        return View(name); // return View(name + ".cshtml")
}

这假设你里面有一个文件夹/Views/Template/与名字whatever.cshtml。我认为使用控制器的好处是它们通过您的控制器进行代理(您可以稍后修改文件夹结构并轻松更新控制器中的引用),并可能向它们传递一些服务器端数据,但这取决于您的要求。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 ng-include 导致未定义 的相关文章

  • 如何将udp发送到udp node.js服务器?

    我对此很陌生 所以我真的不知道我在做什么 但我已经设置了一个 node js udp 服务器 我想从客户端 来自网站 向它发送一个数据包 但我不知道如何在 javascript 中做到这一点 或者是否可能 我不是在研究如何从 Node js
  • Angular 2 链式 Promise 并传递拒绝

    应该是一个简单的问题 但是我找不到有关如何做到这一点的文档 像这样链接一个承诺 Making a promise no problem let promise new Promise resolve reject gt let data d
  • 访问sendBeacon发送的数据

    文档表明sendBeacon通过发送其数据HTTP POST request 但在 PHP 中 POST变量似乎是一个空数组 这是我的 JavaScript 代码 navigator sendBeacon beacon log php My
  • 如何使用 selenium 和 Mocha 获取 xPath() 选择的锚标记的文本

    我已经成功选择了 a 标签 我想显示锚标记的文本 但无法这样做 我正在使用 selenium mocha javascript 和 phantomJS 这是我的脚本 详细 var assert require assert var test
  • 在Javascript中按降序对字符串进行排序(最有效)?

    W3Schools 有这个例子 var fruits Banana Orange Apple Mango fruits sort fruits reverse 这是在 Javascript 中按降序对字符串进行排序的最有效方法吗 Updat
  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • 类型错误:无法读取未定义的属性“defaultPrevented”

    当我进行以下测试时 我收到此错误 it should call pauseAnimationInterval if in focus inject function SearchBoxData intervalManager timeout
  • 检查 touchend 是否在拖动后出现

    我有一些代码可以更改表的类 在手机上 有时表格对于屏幕来说太宽 用户将拖动 滚动来查看内容 但是 当他们触摸并拖动表格时 每次拖动都会触发 touchend 如何测试触摸端是否是触摸拖动的结果 我尝试跟踪dragstart和dragend
  • jquery window.open 在 ajax 成功中被阻止

    尝试在我的 ajax 成功调用中打开一个新的浏览器窗口 但是 它被阻止为弹出窗口 我做了一些搜索 发现用户事件需要绑定到 window open 才能避免这种情况发生 我还找到了这个解决方案 您可以在 ajax 之前打开一个空白窗口 然后在
  • 是否可以使用 javascript 测试用户的浏览器/操作系统是否支持给定类型的链接?

    是否可以使用 javascript 或其他任何东西 测试用户的操作系统 浏览器是否支持给定的 url 方案 例如 大多数仅使用网络邮件的用户计算机上未设置 mailto 是否有可能以某种方式捕获单击 mailto 链接的尝试并弹出比浏览器错
  • Node.js - console.log 不显示数组中的项目,而是显示 [Object]

    我在注销对象内数组的内容时遇到问题 实际的物体看起来像这样 var stuff accepted item1 item2 rejected response Foo envelope from The sender to new item1
  • 将数组排序为第一个最小值、第一个最大值、第二个最小值、第二个最大值等

    编写一个JS程序 返回一个数组 其中第一个元素是第一个最小值 第二个元素是第一个最大值 依此类推 该程序包含一个函数 该函数接受一个参数 一个数组 该函数根据要求返回数组 输入示例 array 2 4 7 1 3 8 9 预期输出 1 9
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • 如果数字小于 10,则显示前导零 [重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 相当于 printf string format https stackoverflow com questions 610406 javascript equivalent t
  • JavaScript onresize 事件多次触发

    我在尝试仅在触发 onresize 事件时运行一次函数时遇到一些麻烦 我已经看过这个问题DOM onresize 事件 https stackoverflow com questions 1500312 javascript onresiz
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 如何在 javascript 正则表达式中匹配平衡分隔符?

    我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an
  • 单击引导分页链接时调用 jquery 函数

    我想在单击引导分页链接时调用 jquery 函数 假设我想从第1页遍历到第2页 应该调用一个jquery函数 我正在使用以下代码 但它不起作用 ul pagination on click li function alert page ch
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas
  • 单击列表时使用 bootstrap Dropdown 防止下拉菜单消失

    我正在使用使用引导下拉菜单 http twitter github com bootstrap javascript html dropdowns生成下拉菜单 我想防止点击菜单时菜单消失 我已经实现了以下代码 但它不起作用 知道如何修复它吗

随机推荐