【发布时间】:2014-09-23 22:45:09
【问题描述】:
您好,我的所有 mvc 页面都有一个通用导航栏。这是一个 MVC 4.0 应用程序。
这是面包屑导航的模型:
<div id="nav">
<ul class="brdcm">
@{
Sample.Models.BreadCrumbsCollection cln = ViewBag.BreadCrumbs;
if (cln != null)
{
for (int i = 0; i < cln.Count; i++)
{
if (i == 0)
{
<li class="last"><a href='@cln[i].Url'>@cln[i].Text</a></li>
}
else
{
<li><a href='@cln[i].Url'>@cln[i].Text</a></li>
}
}
<li class="first">
<img src='@cln.IconUrl' /></li>
}}
</ul>
</div>
在视图文件中,其构建的面包屑如下:
@using sample.Models.Quotas;
@{
ViewBag.Title = "Construction Quote";
Layout = "~/Views/Shared/_Layout.cshtml";
Sample.Models.BreadCrumbsCollection cln = new Sample.Models.BreadCrumbsCollection();
cln.Add(new Sample.Models.BredCrumb() { Text = "Construction Quote", Url = "/quote/"});
//cln.Add(new Sample.Models.BredCrumb() { Text = "Construction Quote", Url = "/quote/" + q.QuoteId.ToString() });
cln.Add(new Sample.Models.BredCrumb() { Text = "Quotes", Url = "/quotes" });
cln.Add(new Sample.Models.BredCrumb() { Text = "Home", Url = "/" });
cln.IconUrl = "/Images/msg_icon.png";
ViewBag.BreadCrumbs = cln;
}
cs.app.js 文件如下所示:
var appModule = angular.module('SampleApp', ['ngResource', 'ngRoute', 'ngSanitize', 'ngCookies', 'ui.utils']);
appModule.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/Quote/:quoteId', { controller: ConstructionQuoteController });
$locationProvider.html5Mode(true);
});
我遇到的问题是应用页面内的所有 href 链接都可以工作,但必须通过 ng-click 完成并在脚本中添加为 $scope
href witten 像这样工作:
<a href="" ng-click="gotoSummary()">Summary</a>
但这不起作用:
cln.Add(new Sample.Models.BredCrumb() { Text = "Home", Url = "/" });
这样做是因为我所有的主要导航和页脚链接都不起作用,因为它们是使用普通 a href = 构建的
如何在 div 调用控制器时更改模型以使用 ng click 并使其仍适用于所有其他正常的 href 链接?
感谢大家的帮助
【问题讨论】:
-
当你点击一个只有href的链接时会发生什么?我建议我们专注于让 href 工作,并且只在我们需要做除了导航之外的其他事情时使用 ng-click。如果您使用的是 HTML 5 模式,那么您需要定义每个路由服务器端和客户端。服务器需要返回为每个 url 加载 angular 的基本页面。然后 angular 可以查看 url 并完成剩下的工作。
-
当我点击一个普通的href时,地址栏上的url会改变但不会重定向。
-
所以我只是将 html5 从 true 更改为 false 并且所有链接都有角度并且没有正常工作。什么情况下需要将html设置为true?
-
在 html 5 模式关闭的情况下,所有的角度路线都有一个 #,例如
/#/whatever。启用 html 5 模式后,它会从所有路由中删除 #,例如/whatever。所以你的 href 值需要反映这一点。 -
由于某种原因,一旦我关闭了 htmlmode,所有链接都可以正常工作,所有 href 链接都没有 # 并且它们仍然可以工作
标签: javascript angularjs asp.net-mvc-4