我正在使用AngularJS和Elasticsearch構建一個小型搜索應用程序。我正在使用AngularJS UI Bootstrap Typeahead來實現自動完成功能。現在我試圖爲搜索功能創建一個自定義搜索指令。仍然在學習AngularJS指令...自定義搜索指令
我應該可以將UI Bootstrap Typeahead指令添加到此自定義搜索指令中,對嗎? (作爲attr)。
所以我只需要將建議功能,搜索功能和搜索項(ng-model)傳遞給我的自定義搜索指令?
我正在使用AngularJS和Elasticsearch構建一個小型搜索應用程序。我正在使用AngularJS UI Bootstrap Typeahead來實現自動完成功能。現在我試圖爲搜索功能創建一個自定義搜索指令。仍然在學習AngularJS指令...自定義搜索指令
我應該可以將UI Bootstrap Typeahead指令添加到此自定義搜索指令中,對嗎? (作爲attr)。
所以我只需要將建議功能,搜索功能和搜索項(ng-model)傳遞給我的自定義搜索指令?
使用示例和引用從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>
感謝您的信息,請你詳細說明一下你將如何使用鏈接屬性? – user3125823
我一直在看指令的鏈接屬性上的一些視頻,它似乎是一個更好的方式將函數和變量傳遞給指令。 「屬性」方式似乎是「基本」方式,鏈接屬性提供了更大的靈活性,您是否同意? – user3125823
好的,我添加了一個我的鏈接示例。希望你能使用它。基本上,您可以在該範圍的指令內定義函數,並傳遞參數。 – Peheje