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指令。

<!--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 = {};`

在您的控制器中。

angularjs中的自定义搜索过滤器

2 个答案: