diff --git a/src/auto-complete.js b/src/auto-complete.js index 694b6432..be93d9c9 100644 --- a/src/auto-complete.js +++ b/src/auto-complete.js @@ -27,8 +27,9 @@ * gains focus. The current input value is available as $query. * @param {boolean=} [selectFirstMatch=true] Flag indicating that the first match will be automatically selected once * the suggestion list is shown. + * @param {string=} [templateHtmlUrl=undefined] Url to load custom template html. */ -tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, tagsInputConfig, tiUtil) { +tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, $interpolate, $http, $templateCache, tagsInputConfig, tiUtil) { function SuggestionList(loadFn, options) { var self = {}, getDifference, lastPromise; @@ -119,10 +120,16 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, tags loadOnDownArrow: [Boolean, false], loadOnEmpty: [Boolean, false], loadOnFocus: [Boolean, false], - selectFirstMatch: [Boolean, true] + selectFirstMatch: [Boolean, true], + templateHtmlUrl:[String, undefined] }); options = scope.options; + if (angular.isDefined(options.templateHtmlUrl)){ + $http.get(options.templateHtmlUrl, {cache: $templateCache}).then(function(result){ + options.templateHtml = result.data; + }); + } tagsInput = tagsInputCtrl.registerAutocomplete(); options.tagsInput = tagsInput.getOptions(); @@ -162,12 +169,21 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, tags }; scope.highlight = function(item) { - var text = getDisplayText(item); - text = tiUtil.encodeHTML(text); - if (options.highlightMatchedText) { - text = tiUtil.safeHighlight(text, tiUtil.encodeHTML(suggestionList.query)); + if (angular.isDefined(options.templateHtml)){ + var custome_text = $interpolate(options.templateHtml)(item); + if (options.highlightMatchedText) { + custome_text = tiUtil.safeHighlight(custome_text, tiUtil.encodeHTML(suggestionList.query)); + } + return $sce.trustAsHtml(custome_text); + } + else{ + var text = getDisplayText(item); + text = tiUtil.encodeHTML(text); + if (options.highlightMatchedText) { + text = tiUtil.safeHighlight(text, tiUtil.encodeHTML(suggestionList.query)); + } + return $sce.trustAsHtml(text); } - return $sce.trustAsHtml(text); }; scope.track = function(item) { diff --git a/test/auto-complete.spec.js b/test/auto-complete.spec.js index a8af3b20..16abcbb9 100644 --- a/test/auto-complete.spec.js +++ b/test/auto-complete.spec.js @@ -1,21 +1,21 @@ 'use strict'; describe('autoComplete directive', function() { - var $compile, $scope, $q, $timeout, + var $compile, $scope, $q, $timeout,$templateCache, parentCtrl, element, isolateScope, suggestionList, deferred, tagsInput, eventHandlers; beforeEach(function() { + jasmine.addMatchers(customMatchers); module('ngTagsInput'); - - inject(function($rootScope, _$compile_, _$q_, _$timeout_) { + inject(function($rootScope, _$compile_, _$q_, _$timeout_,_$templateCache_){ + $templateCache = _$templateCache_; $scope = $rootScope; $compile = _$compile_; $q = _$q_; $timeout = _$timeout_; }); - deferred = $q.defer(); eventHandlers = { call: function(name, args) { @@ -26,6 +26,9 @@ describe('autoComplete directive', function() { }; $scope.loadItems = jasmine.createSpy().and.returnValue(deferred.promise); + $templateCache.put('custom_template.html', + '{{text}} - {{author}}' + ); compile(); }); @@ -1087,5 +1090,43 @@ describe('autoComplete directive', function() { expect(getSuggestion(2)).not.toHaveClass('selected'); }); + }); + describe('custom template feature', function() { + it('initializes templateHtml to undefined', function() { + compile(); + expect(isolateScope.options.templateHtml).toBe(undefined); + }); + it('initializes templateHtmlUrl to undefined', function() { + compile(); + expect(isolateScope.options.templateHtmlUrl).toBe(undefined); + }); + it('uses default template for suggestion if option templateHtmlUrl is not specified', function() { + compile(); + loadSuggestions({ + data: [ + { text: 'Superman', author:'Jerry Siegel' }, + { text: 'Spiderman', author:'Stan Lee' } + ] + }); + expect(getSuggestionText(0)).toBe('Superman'); + expect(getSuggestionText(1)).toBe('Spiderman'); + }); + it('uses custom template for suggestion if option templateHtmlUrl is specified', function() { + compile('template-html-url="custom_template.html"'); + expect(isolateScope.options.templateHtmlUrl).toBe('custom_template.html'); + expect(isolateScope.options.templateHtml).toBe('{{text}} - {{author}}'); + loadSuggestions({ + data: [ + { text: 'Superman', author:'Jerry Siegel' }, + { text: 'Spiderman', author:'Stan Lee' } + ] + }); + expect(getSuggestionText(0)).toBe('Superman - Jerry Siegel'); + expect(getSuggestionText(1)).toBe('Spiderman - Stan Lee'); + }); + + + + }); }); diff --git a/test/test-page.html b/test/test-page.html index 6bf9b85c..355e0f9a 100644 --- a/test/test-page.html +++ b/test/test-page.html @@ -43,12 +43,22 @@ } + +

+ Custome Autocomplete +

+ + + +

@ @@ -96,15 +106,15 @@ angular.module('app', ['ngTagsInput']) .controller('Ctrl', function($scope, $q) { var superheroes = [ - { text: 'Batman ' }, - { text: 'Superman' }, - { text: 'Flash' }, - { text: 'Iron Man' }, - { text: 'Hulk' }, - { text: 'Wolverine' }, - { text: 'Green Lantern' }, - { text: 'Green Arrow' }, - { text: 'Spiderman'} + { text: 'Batman ', author:'Bob Kane' }, + { text: 'Superman', author:'Jerry Siegel' }, + { text: 'Flash', author:'Gardner Fox' }, + { text: 'Iron Man', author:'Stan Lee' }, + { text: 'Hulk', author:'Stan Lee' }, + { text: 'Wolverine', author:'Len Wein' }, + { text: 'Green Lantern', author:'Bill Finger' }, + { text: 'Green Arrow', author:'George Papp' }, + { text: 'Spiderman', author:'Stan Lee'} ]; $scope.tags = [{ text: 'Batman' }, { text: 'Superman' }, { text:'Flash' }];