2

我有一个应该根据 url 过滤的表。

这是我的模块::

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>

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

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

4

3 回答 3

2

你不能正常使用 $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

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

关键是使用带有 templateUrl 和/或控制器的 $route 会创建控制器和视图的新实例，并且根据你的描述你不想要它。因此您可以删除 templateUrl 控制器并发送自定义参数，然后在应用程序中使用 ngSwitch 切换 ngInclude 并使用 1 个控制器进行管理

于 2013-08-28T11:22:05.257 回答
1

到目前为止，我发现这个问题的唯一解决方案是： 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 注意标签背景、饮食、医疗历史以及如何不刷新页面。

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

我仍在寻找一个更简单的解决方案来解决这个简单的问题。

于 2013-07-10T13:20:23.547 回答
1

根据ngHref 文档，您应该使用它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);
};
于 2013-06-02T15:03:05.960 回答