fix(tagsInput): Added support for Angular 1.2.x

- 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.
mbenford · Nov 24, 2013 · 1a0b256 · 1a0b256
1 parent b8673d3
commit 1a0b256
Show file tree

Hide file tree

Showing 13 changed files with 11,868 additions and 6,072 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -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'
  },

diff --git a/build/ng-tags-input.js b/build/ng-tags-input.js
@@ -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)">' +
@@ -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);
 
@@ -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.
@@ -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();
  });
  }
@@ -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) {
@@ -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();
@@ -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);
+ });
+ };
+});
+
 }());
diff --git a/build/ng-tags-input.min.zip b/build/ng-tags-input.min.zip
diff --git a/build/ng-tags-input.zip b/build/ng-tags-input.zip
diff --git a/karma.conf.js b/karma.conf.js
@@ -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'
  ],
 
 

diff --git a/src/auto-complete.js b/src/auto-complete.js
@@ -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) {
@@ -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();

diff --git a/src/tags-input.js b/src/tags-input.js
@@ -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)">' +
@@ -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);
 
@@ -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.
@@ -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();
  });
  }

diff --git a/src/transclude-append.js b/src/transclude-append.js
@@ -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);
+ });
+ };
+});
+
+}());
diff --git a/test/auto-complete.spec.js b/test/auto-complete.spec.js
@@ -45,7 +45,7 @@ describe('autocomplete-directive', function () {
  $compile(element)($scope);
  $scope.$digest();
 
- suggestionList = element.scope().suggestionList;
+ suggestionList = element.isolateScope().suggestionList;
  }
 
  function resolve(items) {
@@ -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() {
@@ -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() {
@@ -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() {
@@ -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() {
@@ -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() {
@@ -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() {
@@ -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() {
@@ -219,7 +223,7 @@ describe('autocomplete-directive', function () {
  suggestionList.select(0);
 
  // Act
- element.scope().addSuggestion();
+ element.isolateScope().addSuggestion();
 
  // Assert
  expect(suggestionList.selected).toBeNull();