2

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

我$routeProvider的设置如下：

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

这将加载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;
    });
});

如果我手动点击 url，这很好用 /#/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);
    };
});

我没有将 url 放入changeRoute()方法中，因为我想根据成员输入到几个输入中的值定向到 url，因此我将模型属性连接到服务.path(url)上的方法中$location。

然后我把ng-click="changeRoute()" attribute一个 HTML <button/>。但是，当我单击按钮时，我可以看到 url 在一瞬间发生了变化，然后直接切换回根 url。我没有.otherwise()设置路由，为什么会立即跳回根目录？

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

更新 当我设置使用 Html5 模式时可能需要注意$locationProvider，它更改了 url 就好了......但由于我在 ASP.NET MVC 站点上托管应用程序，我需要它来使用哈希，而不是 HTML5 模式.

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

4

2 回答 2

6

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

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

当我从带有 href="#" 的锚标记调用该函数时，它失败了。

诀窍是删除 href 属性。据我了解，角度会将您移动到新路径，但随后您的浏览器会执行 href 属性中的 # 值，您会发现自己回到了同一页面。

因此，如果您删除 href="#" 它会起作用。如果您是链接手形光标的粉丝，请使用 CSS 来获取它。

.myLink{
    cursor:pointer;
}

干杯，多鲁克

于 2013-11-01T15:00:53.403 回答
3

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

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

于 2013-04-01T15:34:08.647 回答