Skip to content
This repository has been archived by the owner on Nov 22, 2021. It is now read-only.

Commit

Permalink
fix(tagsInput): Added support for Angular 1.2.x
Browse files Browse the repository at this point in the history 
- Implemented transclude-append directive in order to re-create the old
  behavior of ng-transclude so the autocomplete feature works and the
  tagsInput directive's template remains well-structured.
- Replaced element.bind() with element.on() since starting with v1.2
  bind() is just an alias for on();
- Fixed isolate scope retrieval in all tests;

Closes #17.
  • Loading branch information
@mbenford
mbenford committed Nov 24, 2013
1 parent b8673d3 commit 1a0b256
Show file tree
Hide file tree
Showing 13 changed files with 11,868 additions and 6,072 deletions.
2 changes: 1 addition & 1 deletion Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ module.exports = function(grunt) {
// Sets all files used by the script
files: {
js: {
src: ['src/keycodes.js', 'src/tags-input.js', 'src/auto-complete.js'],
src: ['src/keycodes.js', 'src/tags-input.js', 'src/auto-complete.js', 'src/transclude-append.js'],
out: 'build/<%= pkg.name %>.js',
outMin: 'tmp/<%= pkg.name %>.min.js'
},
Expand Down
29 changes: 22 additions & 7 deletions build/ng-tags-input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ angular.module('tags-input').directive('tagsInput', ["$interpolate", function($i
scope: { tags: '=ngModel', onTagAdded: '&', onTagRemoved: '&' },
replace: false,
transclude: true,
template: '<div class="ngTagsInput {{ options.cssClass }}" ng-transclude>' +
template: '<div class="ngTagsInput {{ options.cssClass }}" transclude-append>' +
' <div class="tags">' +
' <ul>' +
' <li ng-repeat="tag in tags" ng-class="getCssClass($index)">' +
Expand All @@ -112,8 +112,8 @@ angular.module('tags-input').directive('tagsInput', ["$interpolate", function($i
' </div>' +
'</div>',
controller: ["$scope","$attrs","$element", function($scope, $attrs, $element) {
var shouldRemoveLastTag,
events = new SimplePubSub();
var events = new SimplePubSub(),
shouldRemoveLastTag;

loadOptions($scope, $attrs);

Expand Down Expand Up @@ -206,7 +206,7 @@ angular.module('tags-input').directive('tagsInput', ["$interpolate", function($i
var hotkeys = [KEYS.enter, KEYS.comma, KEYS.space, KEYS.backspace];
var input = element.find('input');

input.bind('keydown', function(e) {
input.on('keydown', function(e) {
var key;

// This hack is needed because jqLite doesn't implement stopImmediatePropagation properly.
Expand Down Expand Up @@ -240,7 +240,7 @@ angular.module('tags-input').directive('tagsInput', ["$interpolate", function($i
}
});

element.find('div').bind('click', function() {
element.find('div').on('click', function() {
input[0].focus();
});
}
Expand Down Expand Up @@ -350,7 +350,7 @@ angular.module('tags-input').directive('autoComplete', ["$document", function($d
}
});

input.bind('keydown', function(e) {
input.on('keydown', function(e) {
var key, handled;

if (hotkeys.indexOf(e.keyCode) === -1) {
Expand Down Expand Up @@ -397,7 +397,7 @@ angular.module('tags-input').directive('autoComplete', ["$document", function($d
}
});

$document.bind('click', function() {
$document.on('click', function() {
if (suggestionList.visible) {
suggestionList.reset();
scope.$apply();
Expand All @@ -411,4 +411,19 @@ angular.module('tags-input').directive('autoComplete', ["$document", function($d
};
}]);

/**
* @ngdoc directive
* @name tagsInput.directive:transcludeAppend
*
* @description
* Re-creates the old behavior of ng-transclude.
*/
angular.module('tags-input').directive('transcludeAppend', function() {
return function(scope, element, attrs, ctrl, transcludeFn) {
transcludeFn(function(clone) {
element.append(clone);
});
};
});

}());
Binary file modified build/ng-tags-input.min.zip
View file
Binary file not shown.
Binary file modified build/ng-tags-input.zip
View file
Binary file not shown.
4 changes: 3 additions & 1 deletion karma.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,11 @@ module.exports = function(config) {
'test/lib/angular-mocks.js',
'test/tags-input.spec.js',
'test/auto-complete.spec.js',
'test/transclude-append.spec.js',
'src/keycodes.js',
'src/tags-input.js',
'src/auto-complete.js'
'src/auto-complete.js',
'src/transclude-append.js'
],


Expand Down
4 changes: 2 additions & 2 deletions src/auto-complete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ angular.module('tags-input').directive('autoComplete', function($document) {
}
});

input.bind('keydown', function(e) {
input.on('keydown', function(e) {
var key, handled;

if (hotkeys.indexOf(e.keyCode) === -1) {
Expand Down Expand Up @@ -151,7 +151,7 @@ angular.module('tags-input').directive('autoComplete', function($document) {
}
});

$document.bind('click', function() {
$document.on('click', function() {
if (suggestionList.visible) {
suggestionList.reset();
scope.$apply();
Expand Down
10 changes: 5 additions & 5 deletions src/tags-input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ angular.module('tags-input').directive('tagsInput', function($interpolate) {
scope: { tags: '=ngModel', onTagAdded: '&', onTagRemoved: '&' },
replace: false,
transclude: true,
template: '<div class="ngTagsInput {{ options.cssClass }}" ng-transclude>' +
template: '<div class="ngTagsInput {{ options.cssClass }}" transclude-append>' +
' <div class="tags">' +
' <ul>' +
' <li ng-repeat="tag in tags" ng-class="getCssClass($index)">' +
Expand All @@ -101,8 +101,8 @@ angular.module('tags-input').directive('tagsInput', function($interpolate) {
' </div>' +
'</div>',
controller: function($scope, $attrs, $element) {
var shouldRemoveLastTag,
events = new SimplePubSub();
var events = new SimplePubSub(),
shouldRemoveLastTag;

loadOptions($scope, $attrs);

Expand Down Expand Up @@ -195,7 +195,7 @@ angular.module('tags-input').directive('tagsInput', function($interpolate) {
var hotkeys = [KEYS.enter, KEYS.comma, KEYS.space, KEYS.backspace];
var input = element.find('input');

input.bind('keydown', function(e) {
input.on('keydown', function(e) {
var key;

// This hack is needed because jqLite doesn't implement stopImmediatePropagation properly.
Expand Down Expand Up @@ -229,7 +229,7 @@ angular.module('tags-input').directive('tagsInput', function($interpolate) {
}
});

element.find('div').bind('click', function() {
element.find('div').on('click', function() {
input[0].focus();
});
}
Expand Down
19 changes: 19 additions & 0 deletions src/transclude-append.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
(function() {
'use strict';

/**
* @ngdoc directive
* @name tagsInput.directive:transcludeAppend
*
* @description
* Re-creates the old behavior of ng-transclude.
*/
angular.module('tags-input').directive('transcludeAppend', function() {
return function(scope, element, attrs, ctrl, transcludeFn) {
transcludeFn(function(clone) {
element.append(clone);
});
};
});

}());
24 changes: 14 additions & 10 deletions test/auto-complete.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ describe('autocomplete-directive', function () {
$compile(element)($scope);
$scope.$digest();

suggestionList = element.scope().suggestionList;
suggestionList = element.isolateScope().suggestionList;
}

function resolve(items) {
Expand Down Expand Up @@ -81,14 +81,18 @@ describe('autocomplete-directive', function () {
return getSuggestion(index).html();
}

function isSuggestionsBoxVisible() {
return !getSuggestionsBox().hasClass('ng-hide');
}

function loadSuggestions(items) {
suggestionList.load('');
resolve(items);
}

describe('basic features', function() {
it('ensures that the suggestions list is hidden by default', function() {
expect(getSuggestionsBox().css('display')).toBe('none');
expect(isSuggestionsBoxVisible()).toBe(false);
});

it('renders all elements returned by the load function', function() {
Expand All @@ -107,15 +111,15 @@ describe('autocomplete-directive', function () {
loadSuggestions(['Item1']);

// Assert
expect(getSuggestionsBox().css('display')).toBe('');
expect(isSuggestionsBoxVisible()).toBe(true);
});

it('hides the suggestions list when there is no items to show', function() {
// Act
loadSuggestions([]);

// Assert
expect(getSuggestionsBox().css('display')).toBe('none');
expect(isSuggestionsBoxVisible()).toBe(false);
});

it('hides the suggestion box when the input field becomes empty', function() {
Expand All @@ -128,7 +132,7 @@ describe('autocomplete-directive', function () {
changeInputValue('');

// Assert
expect(getSuggestionsBox().css('display')).toBe('none');
expect(isSuggestionsBoxVisible()).toBe(false);
});

it('hides the suggestion box when the escape key is pressed', function() {
Expand All @@ -140,7 +144,7 @@ describe('autocomplete-directive', function () {
sendKeyDown(KEYS.escape);

// Assert
expect(getSuggestionsBox().css('display')).toBe('none');
expect(isSuggestionsBoxVisible()).toBe(false);
});

it('hides the suggestion box when the user clicks elsewhere on the page', function() {
Expand All @@ -152,7 +156,7 @@ describe('autocomplete-directive', function () {
$(document).trigger('click');

// Assert
expect(getSuggestionsBox().css('display')).toBe('none');
expect(isSuggestionsBoxVisible()).toBe(false);
});

it('hides the suggestion box after adding the selected suggestion to the input field', function() {
Expand All @@ -164,7 +168,7 @@ describe('autocomplete-directive', function () {
sendKeyDown(KEYS.enter);

// Assert
expect(getSuggestionsBox().css('display')).toBe('none');
expect(isSuggestionsBoxVisible()).toBe(false);
});

it('hides the suggestion box when a tag is added', function() {
Expand All @@ -175,7 +179,7 @@ describe('autocomplete-directive', function () {
onTagAddedHandler();

// Assert
expect(getSuggestionsBox().css('display')).toBe('none');
expect(isSuggestionsBoxVisible()).toBe(false);
});

it('adds the selected suggestion to the input field when the enter key is pressed and the suggestions box is visible', function() {
Expand Down Expand Up @@ -219,7 +223,7 @@ describe('autocomplete-directive', function () {
suggestionList.select(0);

// Act
element.scope().addSuggestion();
element.isolateScope().addSuggestion();

// Assert
expect(suggestionList.selected).toBeNull();
Expand Down
Loading

0 comments on commit 1a0b256

Please sign in to comment.