Question

创建了一个plunkr

问题很简单。我正在尝试创建主/详细信息方案。所以有两个模板：列表和详细信息。在列表控制器中，有一种方法重定向到detials路由。这种方法效果很好，因为我用调试器验证了它（通过断点）。

 $scope.goToDetails = function(propItem) {
  //$rootScope.currentProperty = propItem;
  $location.path('/details/');

}

'详细信息'路径（请参阅打击）调用'detailsController'，它当前（用于测试目的）定义为：

 var detailsController = function($scope, $http, $routeParams, $rootScope) {
    var dosomething = "do";
 };

我向调试器验证了执行确实达到了“dosomething”命令，并且路由在浏览器中更改为“details”。但是，HERE是问题，当我继续使用调试器时，angular会将路由更改回默认路由。我仔细考虑了这些定义，但我所做的一切似乎都不对。任何想法？

以下是我如何定义路线：

app.config(function($routeProvider) {
$routeProvider
  .when('/main/', routes.main)
  .when('/details/', routes.details)
  .otherwise({
    redirectTo: '/main'
  });
});

var routes = {
  main: {
  templateUrl: 'PropertiesResults.html',
  controller: 'listingController'
},
details: {
  templateUrl: 'property-detail.html',
  controller: 'detailsController'
 },
}

Answer 1

替换：

<a href="#" ng-click="goToDetails(property)" ...

使用：

<a href="" ng-click="goToDetails(property)" ...

或者它将转到您的otherwise路线。

Answer 2

将您的链接更改为

<a href="#/details">Read More</a>

需要考虑的一些事项：

链接应该像常规的html页面一样工作
如果您想在新页面上执行代码，请查看将该代码放在路线上，或者放在新视图中的控制器中。
如果您想要有条件地启用或禁用该链接，请考虑使用<a ng-disabled="expression"...禁用该链接，这可能不是开箱即用的，但您可以添加自定义指令。
如果您仍然需要在控制器方法中运行该代码，请考虑使用<button type="button" class="link"...并将其设置为看起来像链接，例如display: inline; border: 0; background: transparent;＆＃34;

快乐编码

Angular $ location不起作用

2 个答案: