Question

我正在使用AngularJS和Elasticsearch构建一个小型搜索应用程序。我正在使用AngularJS UI Bootstrap Typeahead来实现自动完成功能。现在我正在尝试为搜索功能创建自定义搜索指令。仍在学习AngularJS指令......

我应该能够将UI Bootstrap Typeahead指令添加到此自定义搜索指令中，对吧？（作为attr）。

所以我只需要将建议功能，搜索功能和搜索词（ng-model）传递给我的自定义搜索指令？

Answer 1

使用Angular Developer Guide: Directives中的示例和引用。

Q1：＆＃34;我应该能够将UI Bootstrap Typeahead指令添加到此自定义搜索指令中，对吧？（作为attr）。＆＃34;

A1：由于您的自定义指令是依赖注入的，您应该能够使用通常依赖注入的任何Angular组件：

＆＃34;就像module.controller API一样，module.directive中的函数参数是依赖注入的。因此，我们可以在指令的链接功能中使用$ interval和dateFilter。＆＃34;

angular.module('docsTimeDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.format = 'M/d/yy h:mm:ss a';
}])
.directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) {

Q2：＆＃34;所以我只需要将建议功能，搜索功能和搜索条件（ng-model）传递给我的自定义搜索指令？＆＃34;

A2：这是一种方法，但是你的指令依赖于控制器主机来获得功能。 If you go with this route you would do so with the & operator.

然而，我会选择link property。在这里，您的指令可以包含计算所需的代码，您可以使用=运算符将搜索参数注入其中。

我的链接示例。我认为您应该能够轻松地将其转换为您的问题：）

指令：

function statisticsTableDirective(common) {
        return {
            restrict: 'E',
            scope: {
                tabledata: '='
            },
            templateUrl: 'app/statistics/statisticsTable.html',
            link: function (scope, element, attrs) {
                var vm = scope;
                vm.isLastMonth = isLastMonth;

                function isLastMonth(index) {
                    return index+1 === new Date().getMonth();
                }
            }
        };
    }

在statisticsTable.html中，我现在可以使用isLastMonth，因为它直接在作用域上。就像在一个简单的ng-class中一样：

ng-class="::{highlight : isLastMonth($index)}"></td>

自定义搜索指令

1 个答案: