Angularjs 什么'；在指令中使用带转置的过滤器的正确方法是什么？

我正在尝试对指令中的转置文本应用过滤器，但我不确定最好的方法是什么。idea的工作副本在下面的链接中，但我觉得我是在通过使用编译函数获取转义文本来对作弊进行排序。看

angular.module（“MyApp”）.directive（'highlighter'，function（）{
返回{
限制：'E'，
替换：正确，
是的，
范围：{
短语：“@”，
正文：“@”
},
模板：“”，
编译：函数（elem、attr、transclude）{
转录（元素，功能（克隆）{
//获取内容并存储在文本属性中
var txt=clone[0]。textContent；
attr.text=txt；
});
}
};
});

我想，另一种方法是

angular.module（“MyApp”）.directive（'highlighter'，function（）{
返回{
限制：'E'，
范围：{
短语：“@”
},
控制器：函数（$scope$filter）{
$scope.highlight=$filter（'highlight'）；
},
链接：功能（范围、要素、属性）{
范围$watch（'短语'），功能（短语）{
var html=scope.highlight（elem.text（），短语）；
elem.html（html）；
});
}
};
});

我想，另一种方法是

angular.module（“MyApp”）.directive（'highlighter'，function（）{
返回{
限制：'E'，
范围：{
短语：“@”
},
控制器：函数（$scope$filter）{
$scope.highlight=$filter（'highlight'）；
},
链接：功能（范围、要素、属性）{
范围$watch（'短语'），功能（短语）{
var html=scope.highlight（elem.text（），短语）；
elem.html（html）；
});
}
};
});

angular.module("MyApp").directive('highlighter', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            phrase: '@',
            text: '@'
        },
        template: '<span ng-bind-html-unsafe=" text | highlight:phrase:false "></span>',
        compile: function (elem, attr, transclude) {
            transclude(elem, function (clone) {
                // grab content and store in text attribute
                var txt = clone[0].textContent;
                attr.text = txt;
            });
        }
    };
});