angularjs 中的自定义搜索过滤器

Question

我正在使用 angular js 的内置搜索过滤器，就像这样-

<!--header starts-->
<input class="form-control fs-mini search" ng-model="search.name" type="text" placeholder="&#xe80a Search">   
<!--header ends-->
<!--content area-->
<div  ng-repeat="user in users  | filter:search">
                {{ user.name }}
                            {{user.l}}


                            {{user.time}}

            </div>
<!--content area ends-->

现在我删除了 header 模板代码并创建了 header 指令。

<!--header starts-->
 <div site-header>
   </div>
<!--header ends-->
<!--content area-->
<div  ng-repeat="user in users  | filter:search">
                {{ user.name }}
                            {{user.l}}


                            {{user.time}}

            </div>
<!--content area ends-->

site-header.js:

'use strict';

    angular.module('myApp')
        .directive('siteHeader', function () {
            return {
                templateUrl: 'views/header-view.html',
                scope: {

                },
                restrict: 'A',
                controller: [ '$scope', '$rootScope', '$location', function($scope, $rootScope, $location) {
                            console.log($scope.data);
                }],
                link: function postLink(scope, element, attrs) {

                }
            };
        });

header-view.html

<input class="form-control fs-mini search" ng-model="search.name" type="text" placeholder="&#xe80a Search">

所有 html 模板正在正确加载。但搜索过滤器不起作用。我不明白如何将 search.name 绑定到指令才能工作。我试过这样-

<div site-header="search.name">
   </div>

但是如何在指令中访问此数据并将其绑定到 ng-model？

Answer 1

更改您的指令定义：

app.directive('myDirective', function(){
      return {
        restrict: 'A',
        template: [
            '<input class="form-control fs-mini search" ng-model="search.name" type="text" placeholder="&#xe80a Search"/>'
          ].join(''),
        scope: true
      }
    });

这里有一个演示：http://plnkr.co/edit/JNCjzs?p=preview

Answer 2

指令在 angular 中有自己的作用域。作用域原型继承自它们的父作用域，这可能会造成混淆，并且需要一些时间和 js 继承知识才能让你明白。如果您不介意这个问题，一个快速解决问题的方法是使用一个对象来存储搜索字符串并在父作用域中实例化它，这将使它在两个作用域中都可用。 我认为你只需要输入一行：

`var search = {};`

在你的控制器中。

angularjs 中的自定义搜索过滤器

Custom search filter in angularjs

javascript

angularjs

angularjs-filter