Angular UI 路由器 - 没有 href 属性的中断答案

【问题标题】：Angular UI Router - breaks without href attributeAngular UI 路由器 - 没有 href 属性的中断
【发布时间】：2015-01-22 11:29:02
【问题描述】：

我正在尝试让 Angular UI 路由器工作。在一个标准的 Web 项目中一切都很好，直到我导入一个 .net 项目并且一切似乎都坏了。即：

<a ui-sref="someUrl">Click here</a>

在之前的项目中不起作用。有趣的是，如果我添加一个带值的 href 属性（不能是空字符串），则单击有效。这很烦人，因为我使用相同代码的两个环境的行为不同。

有谁知道为什么 ui-router 会在没有明确设置标签的 href 属性的情况下中断？ git docs 明确指出 带有代码示例 锚标签只需要 ui-sref 属性，因为它会在适用时自行编写 href 标签。

我正在使用 angular 1.3.2 和 angular-ui-router.0.2.11。

代码：

<h2>Home Page</h2>

<a href="#" ui-sref="someState">Click for profile</a>
<div ui-view="someStateContainer"></div>

这字面意思就是正文中的所有基本 html。

main.js：

/**
 * Primary application definition
 */
var App = App || angular.module("App", [
    "ui.router"
]);


App.config(["$stateProvider", "$urlRouterProvider",
    function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/");

        $stateProvider
            .state("someState", {
                views: {
                    "someStateContainer": {
                        templateUrl: "states/testState"
                    }
                }
            })
}]);

【问题讨论】：

当你说这个链接失效了，你点击它会发生什么？
对不起 - 应该澄清。 “什么都没有”发生 - 例如你点击，没有任何反应，就好像这是一个段落或一个跨度。提琴手甚至没有提出请求。我会用一些代码更新 OP，因为这很有帮助....
您的代码是在 .html 页面中还是在 razor .cshtml 中？在浏览器中呈现的视图源中，链接实际上是什么样的？
.cshtml。链接如下所示：点击查看个人资料
添加href或者省略href时是这样的？

标签： javascript .net angularjs model-view-controller

【解决方案1】：

<a> 标记必须具有href 属性才能被视为链接。 UiRouter 的ui-sref 只是一种指导 uiRouter 如何派生正确的href 的方法，然后它将设置在元素上。

我注意到在某些情况下，uiRouter不设置href。在我的例子中，有一个用url: "/dashboard" 定义的状态。但是，ui-sref="/dashboard" 不会生成 href 属性（甚至不会生成错误）。我必须设置ui-sref="dashboard"，这样uiRouter 才会生成href="#/dashboard"。可能还有更多的情况 uiRouter 不报错就失败了。

HTH

【讨论】：

一切都好，我们现在在 Ng2 上... 2 年了。这现在无关紧要了。