带有角度路线/MVC 区域的超链接不起作用

我有一个复杂的MVC项目，我们正在添加一些Angular功能。我对 Angular 很陌生，现在已经在 Pluralsight 上观看了三门 Angular 课程。他们非常有帮助，但我缺少一些理解。

我知道我只需要一个 ng-app（除非我想引导并且我认为我不想）。所以这个应用程序定义了我的配置和一个自定义指令。自定义指令运行良好，但是当我单击该指令中的链接时，它不会去任何地方......好吧，也许确实如此，但不是我所期望的。Fiddler没有显示任何异常，例如404或500错误。

(function ()
{
  "use-strict";

   angular.module("appMainNav", ["ngRoute"])
   .config(function ($routeProvider) {
    $routeProvider.when("/MySearch", {
        controller: "routingController"
    });
    $routeProvider.otherwise({ redirectTo: "/" });
})
})();

我的路由控制器：

(function () {
  "use strict";
  angular.module("appMainNav")
  .controller("routingController", routingController);
function routingController($http) {
    var vm = this;
    alert("Routed");
}
})();

我的 HTML 链接呈现：

<a href="#/MySearch">Search</a>

我没有找到页面...URL 只是附加 #/MySearch。没有控制台错误等。

我期待收到javascript警报...？

蒂亚

编辑

应该早点添加。这是标记：

_Layout页：

<body>
   <div ng-app="appMainNav" ng-controller="routingController" class="container">
      @RenderBody()
    </div>
</body>

RenderBody 是 Index.cshtml：

<div class="row">
<div>
    Header Stuff
</div>
</div>
<div class="row">
<div class="col-md-2">
    <dashboard-main-nav></dashboard-main-nav>
</div>
<div  class="col-md-3">
    <div></div>
</div>
<div class="col-md-8">
    <div></div>
</div>
</div>
<div class="row">
<div>
    Footer Stuff
</div>
</div>

自定义指令角度代码被排除在上面的截图之外，但这是生成链接的地方。

您需要将事件处理程序分配给锚标记上的单击事件：

<a href="#/MySearch" ng-click="foo()">Search</a>

其中foo是在控制器作用域上定义的函数：

function routingController($http, $scope) {
    var vm = this;
    $scope.foo = function(){
      alert("I am so tired");
    }
    alert("Routed");
}

试试这个，它应该可以工作。

相关内容

最新更新

热门标签：