angularjs - 将元素放在控制器之外并让它们仍然可以工作 AngularJS

Question

如何使用控制器外部的过滤器控制变量和元素？

我已经设置了一个示例来更好地帮助我解释我的问题http://embed.plnkr.co/7E5Ls3oH0q4HuEZsewJL/

您将看到我有一个 div 正在使用 ng-show 切换，然后在过滤名称列表的搜索输入中。当我需要将切换的 div 和搜索过滤器放在“MainCtrl”之外时，问题就出现了。有没有办法让我把这些放在控制器之外，但仍然与“MainCtrl”的内容进行交互？

Answer 1

有几种方法可以在您的应用程序中没有原型链接的组件之间进行通信。您可以使用 Angular 事件来广播您的搜索，然后从您的控制器处理它。或者，您甚至可以$rootScope在两个组件中用作全局空间，两者都可以用来存储变量和方法。这些都是坏主意——它们会让你的生活更加艰难。

相反，每当您需要在未直接链接的控制器和/或指令之间共享信息时，您的第一个想法应该是创建服务。

这样的服务可能如下所示：

app.factory('Search', function() {
  var search = {
    results: [],
    query: '',
    showDetails: false
  };

  return search;
});

您可以将它注入到搜索框的控制器和控制器或指令（我选择创建一个指令）中，并将服务初始化为每个中的范围变量：

app.controller('MainCtrl', function ($scope, friendsFactory, Search) {
  $scope.friends = friendsFactory.query();
  $scope.search = Search;
});

app.directive('search', function(Search){
  return {
    restrict: 'E',
    scope: {},
    templateUrl: 'directive-search.html',
    link: {
    pre: function(scope, elem, attrs) {
      scope.search = Search;
    }
    }
  }  
});

您可以在视图中使用该变量，作为搜索框的模型和您的过滤器ng-repeat：

指令模板

<div ng-class="'details'" ng-show="search.showDetails">
  <label for="">Search Names</label>
  <input type="text" ng-model="search.query" />
</div>

筛选

<div class="content" ng-controller="MainCtrl">
  <a ng-click="search.showDetails = !search.showDetails"> Click Me</a>
  <div ng-repeat="friend in friends | filter:search.query | limitTo: 5">
    {{friend.name}}
  </div>
</div>

Plunker 演示

注意：这个简单的实现允许页面上有一个单独的搜索/结果对。如果您需要多个实例，则需要进一步开发服务以允许多个实例。