【问题标题】:angularJS href route conflictangularJS href 路由冲突
【发布时间】: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


【解决方案1】:

对于 Angular 在链接中使用 #(请参阅此处http://plnkr.co/edit/55jSlti81Xggk6tue1HW?p=preview

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

对于“非 Angular”,使用普通链接

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-03-06
    相关资源
    最近更新 更多