angularjs中的自定义搜索过滤器

Question

我正在使用像这样的角度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 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-->

网站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) {

                }
            };
        });

报头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

指令在角度上有自己的作用域。 范围原型通常是从​​其父范围继承的，这可能会造成混淆，并且需要花费一些时间和对js继承的知识来解决问题。 如果您不为此而烦恼，那么快速解决问题的方法是使用一个对象存储搜索字符串并将其实例化到父作用域中，这将使其在两个作用域中都可用。 我认为您所需要的只是以下行：

`var search = {};`

在您的控制器中。