自定义搜索指令

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

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

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

来源

2016-03-03 user3125823

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

Q1：“我应该可以将UI Bootstrap Typeahead指令添加到此自定义搜索指令中，对吗？（作为attr）。”

A1：作为您的自定义指令是依赖注入，你应该能够使用任何角度成分，你通常会依赖注入：

“就像module.controller API，在模块的功能参数。指令是依赖注入的，因此，我们可以在指令的链接函数中使用$ interval和dateFilter。“

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：“所以我只需要建议功能，搜索功能和搜索字词（NG-模型）传递给我的自定义搜索指令？”

A2：这是一种方法，但是您的指令将取决于控制器主机的功能。我想用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级：

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

来源

2016-03-03 22:42:42 Peheje

感谢您的信息，请你详细说明一下你将如何使用链接属性？ – user3125823

我一直在看指令的链接属性上的一些视频，它似乎是一个更好的方式将函数和变量传递给指令。 “属性”方式似乎是“基本”方式，链接属性提供了更大的灵活性，您是否同意？ – user3125823

好的，我添加了一个我的链接示例。希望你能使用它。基本上，您可以在该范围的指令内定义函数，并传递参数。 – Peheje

自定义搜索指令

回答

相关问题