Question

您好我的所有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 like this works：

<a href="" ng-click="gotoSummary()">Summary</a>

但这不起作用：

cln.Add(new Sample.Models.BredCrumb() { Text = "Home", Url = "/" });

这样做的是我所有的主要导航和页脚链接都不起作用，因为它们是用正常的href =

构建的

当div调用控制器并仍使其适用于所有其他正常的href链接时，如何更改模型以使用ng click？

谢谢你的帮助

Answer 1

对于角色使用链接中的＃（请参阅此处http://plnkr.co/edit/55jSlti81Xggk6tue1HW?p=preview）

 <a href="#/products/">Angular Product Link</a>

对于＆＃39; Non Angular＆＃39;使用普通链接

  <a href="/products/">Non Angular Product Link</a>

angularJS href路由冲突

1 个答案: