2016-03-03 107 views
0

我正在使用AngularJS和Elasticsearch構建一個小型搜索應用程序。我正在使用AngularJS UI Bootstrap Typeahead來實現自動完成功能。現在我試圖爲搜索功能創建一個自定義搜索指令。仍然在學習AngularJS指令...自定義搜索指令

我應該可以將UI Bootstrap Typeahead指令添加到此自定義搜索指令中,對嗎? (作爲attr)。

所以我只需要將建議功能,搜索功能和搜索項(ng-model)傳遞給我的自定義搜索指令?

回答

2

使用示例和引用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> 
+0

感謝您的信息,請你詳細說明一下你將如何使用鏈接屬性? – user3125823

+0

我一直在看指令的鏈接屬性上的一些視頻,它似乎是一個更好的方式將函數和變量傳遞給指令。 「屬性」方式似乎是「基本」方式,鏈接屬性提供了更大的靈活性,您是否同意? – user3125823

+0

好的,我添加了一個我的鏈接示例。希望你能使用它。基本上,您可以在該範圍的指令內定義函數,並傳遞參數。 – Peheje