Move typeahead (and it's associated options) into a separate bs-tags-…

…typeahead directive.

examples/assets/app_bs3.js

@@ -64,10 +64,8 @@ angular.module('AngularExample', ['bsTagsInput'])
   .controller('Ctrl',
     function Ctrl($scope) {
       $scope.tags = ['Amsterdam', 'Washington'];
-      $scope.tagsOptions = {
-        typeahead: {
-          local: ['Sydney', 'Beijing', 'Cairo']
-        }
+      $scope.tagsTypeahead = {
+        local: ['Sydney', 'Beijing', 'Cairo']
       };
     }
   );

examples/assets/bsTagsInput.js

@@ -5,28 +5,24 @@ angular.module('bsTagsInput', [])
  * @restrict A
  *
  * @description
- * Sets up an input field for tag inputs, using the bootstrap-tagsinput jQuery plugin.  Optionally
- * uses typeahead.js for autocompletion.
+ * Sets up an input field for tag inputs, using the bootstrap-tagsinput jQuery plugin.
  *
  * @element INPUT or SELECT
  * @param {Object} options passed to the bootstrap-tagsinput plugin at initialization.
- *    The typeahead option, if specified, will instead be passed to the typeahead.js plugin.
  *
  * @example
     <doc:example>
       <doc:source>
         <script>
           function Ctrl($scope) {
             $scope.tags = ['Amsterdam', 'Washington'];
-            $scope.tagsOptions = {
-              typeahead: {
-                local: ['Sydney', 'Beijing', 'Cairo']
-              }
+            $scope.tagsTypeahead = {
+              local: ['Sydney', 'Beijing', 'Cairo']
             }
           }
         </script>
         <form ng-controller="Ctrl">
-          <input type="text" ng-model="tags" bs-tags-input="tagsOptions">
+          <input type="text" ng-model="tags" bs-tags-input bs-tags-typeahead="tagsTypeahead">
           <pre>{{tags}}</pre>
         </form>
       </doc:source>
@@ -52,19 +48,11 @@ angular.module('bsTagsInput', [])
 
   return {
     require: 'ngModel',
+    controller: function() {
+    },
     link: function(scope, element, attrs, ngModelCtrl) {
-      // parse options
-      var options = {};
-      if (attrs.bsTagsInput) {
-        options = scope.$eval(attrs.bsTagsInput);
-      }
-      var typeaheadOpts = options.typeahead;
-      delete options.typeahead;
-      if (jQuery.fn.typeahead === undefined) {
-        typeaheadOpts = undefined;
-      }
-
       // initialize tagsinput
+      var options = scope.$eval(attrs.bsTagsInput) || {};
       element.tagsinput(options);
 
       // handle changes from the underlying model
@@ -89,16 +77,32 @@ angular.module('bsTagsInput', [])
       scope.$on('$destroy', function() {
         element.tagsinput('destroy');
       });
-
-      // setup typeahead, if desired
-      if (typeaheadOpts !== undefined) {
-        element.tagsinput('input')
-            .typeahead(typeaheadOpts)
-            .bind('typeahead:selected', function(obj, datum) {
-          element.tagsinput('add', datum.value);
-          element.tagsinput('input').typeahead('setQuery', '');
-        });
-      }
     }
   };
+})
+/**
+ * @ngdoc directive
+ * @name bsTagsTypeahead
+ * @restrict A
+ *
+ * @description
+ * Using typeahead.js, adds autocompletion support to a bsTagsInput field.
+ *
+ * @element INPUT or SELECT
+ * @param {Object} options passed to the typeahead.js plugin.
+ */
+.directive('bsTagsTypeahead', function() {
+  return {
+    require: 'bsTagsInput',
+    link: function(scope, element, attrs, bsTagsInputCtrl) {
+      // setup typeahead on the 'input' element
+      var options = scope.$eval(attrs.bsTagsTypeahead) || {};
+      element.tagsinput('input')
+          .typeahead(options)
+          .bind('typeahead:selected', function(obj, datum) {
+        element.tagsinput('add', datum.value);
+        element.tagsinput('input').typeahead('setQuery', '');
+      });
+    }
+  }
 });

examples/bootstrap3/index.html

@@ -305,7 +305,8 @@ <h3>AngularJS support</h3>
           <div class="bs-example">
             <input type="text"
               ng-model="tags"
-              bs-tags-input="tagsOptions">
+              bs-tags-input
+              bs-tags-typeahead="tagsTypeahead">
           </div>
           <div class="accordion">
             <div class="accordion-group">
@@ -318,17 +319,16 @@ <h3>AngularJS support</h3>
                 <div class="accordion-inner">
                   <pre class="prettyprint linenums">&lt;input type="text"
   ng-model="tags"
-  bs-tags-input="tagsOptions"&gt;
+  bs-tags-input
+  bs-tags-typeahead="tagsTypeahead"&gt;
 
 &lt;script&gt;
 angular.module('AngularExample', ['bsTagsInput'])
   .controller('Ctrl',
     function Ctrl($scope) {
       $scope.tags = ['Amsterdam', 'Washington'];
-      $scope.tagsOptions = {
-        typeahead: {
-          local: ['Sydney', 'Beijing', 'Cairo']
-        }
+      $scope.tagsTypeahead = {
+        local: ['Sydney', 'Beijing', 'Cairo']
       };
     }
   );

src/bsTagsInput.js

@@ -5,28 +5,24 @@ angular.module('bsTagsInput', [])
  * @restrict A
  *
  * @description
- * Sets up an input field for tag inputs, using the bootstrap-tagsinput jQuery plugin.  Optionally
- * uses typeahead.js for autocompletion.
+ * Sets up an input field for tag inputs, using the bootstrap-tagsinput jQuery plugin.
  *
  * @element INPUT or SELECT
  * @param {Object} options passed to the bootstrap-tagsinput plugin at initialization.
- *    The typeahead option, if specified, will instead be passed to the typeahead.js plugin.
  *
  * @example
     <doc:example>
       <doc:source>
         <script>
           function Ctrl($scope) {
             $scope.tags = ['Amsterdam', 'Washington'];
-            $scope.tagsOptions = {
-              typeahead: {
-                local: ['Sydney', 'Beijing', 'Cairo']
-              }
+            $scope.tagsTypeahead = {
+              local: ['Sydney', 'Beijing', 'Cairo']
             }
           }
         </script>
         <form ng-controller="Ctrl">
-          <input type="text" ng-model="tags" bs-tags-input="tagsOptions">
+          <input type="text" ng-model="tags" bs-tags-input bs-tags-typeahead="tagsTypeahead">
           <pre>{{tags}}</pre>
         </form>
       </doc:source>
@@ -52,19 +48,11 @@ angular.module('bsTagsInput', [])
 
   return {
     require: 'ngModel',
+    controller: function() {
+    },
     link: function(scope, element, attrs, ngModelCtrl) {
-      // parse options
-      var options = {};
-      if (attrs.bsTagsInput) {
-        options = scope.$eval(attrs.bsTagsInput);
-      }
-      var typeaheadOpts = options.typeahead;
-      delete options.typeahead;
-      if (jQuery.fn.typeahead === undefined) {
-        typeaheadOpts = undefined;
-      }
-
       // initialize tagsinput
+      var options = scope.$eval(attrs.bsTagsInput) || {};
       element.tagsinput(options);
 
       // handle changes from the underlying model
@@ -89,16 +77,32 @@ angular.module('bsTagsInput', [])
       scope.$on('$destroy', function() {
         element.tagsinput('destroy');
       });
-
-      // setup typeahead, if desired
-      if (typeaheadOpts !== undefined) {
-        element.tagsinput('input')
-            .typeahead(typeaheadOpts)
-            .bind('typeahead:selected', function(obj, datum) {
-          element.tagsinput('add', datum.value);
-          element.tagsinput('input').typeahead('setQuery', '');
-        });
-      }
     }
   };
+})
+/**
+ * @ngdoc directive
+ * @name bsTagsTypeahead
+ * @restrict A
+ *
+ * @description
+ * Using typeahead.js, adds autocompletion support to a bsTagsInput field.
+ *
+ * @element INPUT or SELECT
+ * @param {Object} options passed to the typeahead.js plugin.
+ */
+.directive('bsTagsTypeahead', function() {
+  return {
+    require: 'bsTagsInput',
+    link: function(scope, element, attrs, bsTagsInputCtrl) {
+      // setup typeahead on the 'input' element
+      var options = scope.$eval(attrs.bsTagsTypeahead) || {};
+      element.tagsinput('input')
+          .typeahead(options)
+          .bind('typeahead:selected', function(obj, datum) {
+        element.tagsinput('add', datum.value);
+        element.tagsinput('input').typeahead('setQuery', '');
+      });
+    }
+  }
 });