anglar 实现模糊搜索，关键字高亮

1.定义高亮 filter

 我们希望搜索的关键字在正文中高亮出来，正文就是过滤器的第一个参数，第二个参数就是搜索关键字，这样，我们的过滤器将会有两个参数了。

高亮的原理很简单，将需要高亮的内容使用 span 标记隔离出来，再加上一个特殊的 class 进行描述就可以了。

 

app.filter("highlight", function($sce, $log){

    var fn = function(text, search){
        $log.info("text: " + text);
        $log.info("search: " + search);

        if (!search) {
            return $sce.trustAsHtml(text);
        }
        text = encodeURI(text);
        search = encodeURI(search);

        var regex = new RegExp(search, 'gi')
        var result = text.replace(regex, '$&');
        result = decodeURI(result);
        $log.info("result: " + result );
        return $sce.trustAsHtml(result);
    };

    return fn;
});

 

$sce, 和 $log 是 angular 提供的两个服务，其中 $sce 服务需要使用  ngSanitize 模块。关于这个模块，可以参考：angular-ngSanitize模块-$sanitize服务详解

2. 定义服务对象

我们的页面可能很复杂，需要在一个控制器中输入关键字，但是，需要在多个控制器中使用这个关键字进行过滤，怎么处理呢？使用服务可以解决这个问题。

在 Angular 中，服务就是一个单例对象，我们使用 factory 可以直接定义一个服务对象。

 

app.factory("notifyService", function(){
    var target = {
        search:"key"
    };

    return target;
});

 

在需要使用这个对象的地方，直接注入就可以获取这个对象了。

3. 定义搜索 Controller

在搜索控制器中，我们希望用户提供搜索关键字。为了方便检查，我们顺便将用户的输入展示出来。

 

        <</span>div ng-controller="tools">
            <</span>div>
                <</span>input type="text" ng-model="notify.search" value=""/>
            </</span>div>
            <</span>div>
                {{notify.search}}
            </</span>div>
        </</span>div>

 

控制器的实现，我们将服务对象直接注入到控制器中，然后绑定到当前的 $scope 上，以便在当前控制器中实现绑定。

app.controller("tools", function($scope, notifyService){
    $scope.notify = notifyService;
});

现在，我们可以直接输入搜索关键字，这个关键字将被保存到服务对象中，可以在当前的 module 中的各个控制器中访问这个服务对象。

4. 在内容 Controller 中使用 filter

现在，我们已经有了过滤器，也可以直接通过服务对象来获取搜索关键字，现在组合起来就可以使用了。text 中是我们的正文内容。

        <</span>div ng-controller="search">
            <</span>div ng-bind-html="text | highlight:notify.search">
            </</span>div>
        </</span>div>

下面再看看 highlight 和 notify.search 来自何方。

app.controller("search", function($scope, $log, notifyService){
    $scope.text = "hello, world. hello, world. hello, world.";
    $scope.notify = notifyService;
})

为了在当前控制器中使用搜索关键字，关键是在搜索关键字发生变化的时候，还需要自动更新，我们将服务对象绑定到当前的 $scope 中，这是引用的名称为 notify.

这样，在复杂页面中，我们可能存在多个控制器，在每个需要高亮的控制器中，我们只需要注入服务对象，就可以直接获取到当前的搜索关键字，配合使用过滤器，就可以直接实现全局高亮了。