从Angular JS上的外部html文件中过滤模块

Question

我正在尝试使用以下方法过滤列表（在list.html中）：

<div ng-repeat="event in events | filter:filter | orderBy:order">

我的ListController里面有一个过滤器对话框

.controller('ListController', ['$scope', '$dialog', function($scope,$dialog) {
  $scope.filterDialog = function() {
      var dlg = $dialog.dialog({
          templateUrl: 'pages/filter.html',
          controller: 'FilterController'
      });
  };

}])

和filter.html包含：

<form id="filter-form">
  <fieldset>
    <legend>Filter</legend>
        <label>Name:</label>
        <input type="text" ng-model="filter.name">
        <label>Description:</label>
        <input type="text" ng-model="filter.description">
    <div id="sort_section">
        <label>Sort By:</label>
        <label class="radio">
            <input type="radio" name="sort_by" value="time" ng-model="order.time" ng-checked="true" /> Time
        </label>
        <label class="radio">
            <input type="radio" name="sort_by" value="distance" ng-model="order.name" /> Name
        </label>
    </div>
    <button type="submit" class="btn" ng-click="close(filter,order)">Submit</button>
  </fieldset>
</form>

它似乎不与列表绑定，因此列表不会过滤 我在这里缺少什么？

更新
我更改了上面的代码（将参数添加到ng-click =“close（）”调用），和 我注意到只有当我删除type="radio"时 部分，我可以得到“订单”。

更新
这是ng-checked="true"件，一旦移除，我就得到了过滤器。

Answer 1

这里有两个不同的控制器：ListController和FilterController

您尝试使用的“过滤器”属于FilterController的范围，您无法直接在ListController中访问它。

因此，您需要一个能够保存“过滤器”的服务，以便我们可以在两个控制器中使用它：

Service.js

app.factory('filterData', function() {
  var filter = {        
    name: "abc"
  };    
  return filter;
});

在两个控制器中使用它

ListController

app.controller('ListController', function($scope, filterData) {
  $scope.filter = filterData;
});

FilterController

app.controller('FilterController', function($scope, filterData) {
  $scope.filter = filterData;
});