Question

使用Angular.js，我正在尝试创建一个按钮，单击该按钮会将成员推送到新的URL（无页面重新加载），并让$routeProvider为控制器设置一些$routeParams在对数据进行JSON调用时使用。

我的$routeProvider设置如下：

app.config(function ($routeProvider) {
    $routeProvider.when('/list/:base/:keyword', { templateUrl: 'list', controller: 'listCtrl' })
});

使用“list”模板加载listCtrl。在listCtrl我打电话给这样的数据：

app.controller('listCtrl', function ($scope, $routeParams, $location, $http) {
    console.log('listCtrl called');
    $http.get('urlForData&kw=' + $routeParams.keyword).success(function (data) {
        $scope.results = data;
    });
});

如果我手动点击网址/＃/ list / baseName / keyword将所有正确的$routeParams放入listCtrl并且JSON调用有效，则此方法正常。

我想让用户点击该路线，在我的homeCtrl我有改变路线的方法，如下：

app.controller('homeCtrl', function ($scope, $routeParams, $location) {
    var model = {
        criteria: 'yakiniku',
        base: 'yokota-ab-japan'
    };
    $scope.model = model;

    $scope.changeRoute = function () {
        $location.path('/list/' + model.base + '/' + model.criteria);
    };
});

我没有在changeRoute()方法中添加网址，因为我希望根据成员输入的值输入一个网址，因此我将模型属性连接到{{1} .path(url)服务上的方法。

然后我在HTML $location上添加了ng-click="changeRoute()" attribute。但是，当我单击按钮时，我可以看到URL瞬间更改，然后再切换回根URL。我没有<button/>路由设置，为什么它会立即跳回到根目录？

另外，我没有引用第三方库，只有角度。

更新可能很重要的是要注意当我设置.otherwise()以使用Html5模式时，它会更改网址...但是由于我在ASP.NET MVC网站上托管应用程序，我需要它使用哈希，而不是HTML5模式。

虽然路由更改在HTML5模式下工作，但是没有hash标记的url上的页面刷新将会中断，因为它会干扰ASP.NET MVC路由，并且我正在尝试允许深度链接到我的角度应用程序。

Answer 1

我有类似的问题，并得到了解决方案。我希望这可以帮助别人。我在控制器中有一个函数，它使用location方法更改路径。它是这样的：

$scope.goHome = function(){
    $location.path('/home');
}

当我用href =“＃”从锚标签调用该函数时，它失败了。

诀窍是删除href属性。据我所知，angular会将你移动到新路径，但是你的浏览器会在href属性中执行#value，你会发现自己回到了同一页面。

因此，如果删除href =“＃”，则可以正常工作。如果您是链接的手形光标的粉丝，请使用CSS来获取它。

.myLink{
    cursor:pointer;
}

干杯， Doruk

Answer 2

您应该检查是否启用了HTML5路由。以下是docs的链接：http://docs.angularjs.org/guide/dev_guide.services。$ location

以下是您的情况的工作示例：http://plnkr.co/edit/snCoGhFnLqgLSIGrJCe7?p=preview

为什么我的Angular.js $ location.path（url）循环回root？

2 个答案: