Question

我有一张表，应根据网址进行过滤。

这是我的模块::

angular.module('myApp', ['pipelibservice']).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/pipes/:pipeID', {templateUrl: 'partials/wizard.html',   controller: PipeListCtrl});
    }]);

在我的模板中，我有一个带有href的列表，该列表应该过滤表格：

    <li ng-repeat="pipe in pipes">
        <a href='#/pipes/{{ pipe.code }}'>{{ pipe.code }} - {{pipe.title_en}}</a>
    </li>

这是我的index.html

<!doctype html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>

  <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="css/app.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/0.7.2/angular-strap.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
    <script src="lib/angular/angular-resource.js"></script>
</head>
<body>
    <div ng-view></div>


</body>
</html>

问题是，当我点击链接时整个页面会重新加载。我只希望更改网址，以便我的表格被过滤。如何修复以便不重新加载页面？

更新我已将其缩小到其余的API调用。如果我用硬编码值（来自原始的rest-call）替换其余的调用，那么它可以工作。知道什么可能是错的吗？

Answer 1

你通常不能使用$ route而不刷新页面。但在你的情况下，我只会使用过滤器http://docs.angularjs.org/api/ng.filter:filter

<li ng-repeat="pipe in pipes | filter: pipeID">
    <a href='#/pipes/{{ pipe.code }}'>{{ pipe.code }} - {{pipe.title_en}}</a>
</li>

别忘了输入ctrl $ scope.pipeID = $ routeParams.pipeID

P.S。我写了一篇文章解释了一点简单的Ben Nadels想法（这很棒），并且它是一种使用$ route而不刷新http://bresleveloper.blogspot.co.il/2013/08/breslevelopers-angularjs-tutorial-basic_20.html的方法

重点是使用带有templateUrl和/或控制器的$ route创建控制器和视图的新实例，并且通过你的描述你不想要它。所以你可以删除templateUrl控制器并发送一个自定义参数，并在应用程序中使用ngSwitch来切换ngInclude并使用1个控制器管理所有这些

Answer 2

根据ngHref documentation，您应该使用ng-click来阻止页面重新加载：

<a href='' ng-click="goToPipe({{pipe.code}})">{{ pipe.code }} - {{pipe.title_en}}</a>

您需要在控制器中创建goToPipe函数，例如：

$scope.goToPipe = function (pipe_code) {
    $location.path("/pipe/" + pipe_code);
};

Answer 3

到目前为止，我发现这个问题的唯一解决方案是： http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm

看看他们的演示： http://bennadel.github.io/AngularJS-Routing/#/pets/cats/10/medical-history 注意选项卡BACKGROUND，DIET，MEDICAL HISTORY以及不刷新页面的方式。

然而，这个解决方案非常复杂，涉及并使用了许多非原生到有角度的东西。

我仍然希望找到一个解决这个简单问题的简单方法。

深度链接，页面重新加载，角度js

3 个答案: