Merge 50d6ad0 into 315f3a2

scss/bootstrap/main.scss

@@ -67,6 +67,22 @@ tags-input {
     border-color: #843534;
     @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483)
   }
+  .disabled {
+    &:focus {
+      outline: none;
+    }
+    .tags {
+      background-color: $tags-bgcolor-disabled;
+      cursor: not-allowed;
+      .tag-item {
+        opacity: $tag-opacity-disabled;
+      }
+      .input[disabled] {
+        background-color: #EEE;
+        cursor: not-allowed;
+      }
+    }
+  }
 }
 
 @import "input-groups";

scss/bootstrap/variables.scss

@@ -5,11 +5,13 @@ $tags-border-shadow:                    inset 0 1px 1px rgba(0, 0, 0, .075);
 $tags-transition:                       border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 $tags-outline-border:                   1px solid #66afe9;
 $tags-outline-border-shadow:            inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
+$tags-bgcolor-disabled:					#eee;
 
 $tag-color:                             #fff;
 $tag-bgcolor:                           #428bca;
 $tag-border:                            1px solid #357ebd;
 $tag-border-radius:                     4px;
+$tag-opacity-disabled:                  0.65;
 
 $tag-color-selected:                    #fff;
 $tag-bgcolor-selected:                  #d9534f;

scss/tags-input.scss

@@ -75,9 +75,27 @@ tags-input {
         display: none;
       }
     }
+
   }
 
   &.ng-invalid .tags {
     @include box-shadow($tags-outline-box-shadow-invalid);
   }
+
+  .disabled {
+    &:focus {
+      outline: none;
+    }
+    .tags {
+      background-color: $tags-bgcolor-disabled;
+      cursor: not-allowed;
+      .tag-item {
+        opacity: $tag-opacity-disabled;
+      }
+      .input[disabled] {
+        background-color: #EEE;
+        cursor: not-allowed;
+      }
+    }
+  }
 }

scss/variables.scss

@@ -7,6 +7,7 @@ $tags-border:                           1px solid darkgray;
 $tags-border-shadow:                    1px 1px 1px 0 lightgray inset;
 $tags-outline-box-shadow:               0 0 3px 1px rgba(5, 139, 242, 0.6);
 $tags-outline-box-shadow-invalid:       0 0 3px 1px rgba(255, 0, 0, 0.6);
+$tags-bgcolor-disabled:					#eee;
 
 $tag-height:                            26px;
 $tag-font:                              14px $base-font-family;
@@ -15,6 +16,7 @@ $tag-border:                            1px solid rgb(172, 172, 172);
 $tag-border-radius:                     3px;
 $tag-color-selected:                    rgba(254, 187, 187, 1) 0%, rgba(254, 144, 144, 1) 45%, rgba(255, 92, 92, 1) 100%;
 $tag-color-invalid:                     #ff0000;
+$tag-opacity-disabled:                  0.65;
 
 $remove-button-color:                   #585858;
 $remove-button-color-active:            #ff0000;

src/tags-input.js

@@ -217,6 +217,10 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
                 setElementValidity();
             });
 
+            attrs.$observe('disabled', function (disabled) {
+                scope.disabled = !!disabled;
+            });
+
             scope.eventHandlers = {
                 input: {
                     change: function(text) {

templates/tags-input.html

@@ -1,9 +1,9 @@
-<div class="host" tabindex="-1" ng-click="eventHandlers.host.click()" ti-transclude-append>
+<div class="host" tabindex="-1" ng-click="disabled || eventHandlers.host.click()" ti-transclude-append ng-class="{'disabled': disabled}">
   <div class="tags" ng-class="{focused: hasFocus}">
     <ul class="tag-list">
       <li class="tag-item" ng-repeat="tag in tagList.items track by track(tag)" ng-class="{ selected: tag == tagList.selected }">
         <span ng-bind="getDisplayText(tag)"></span>
-        <a class="remove-button" ng-click="tagList.remove($index)" ng-bind="options.removeTagSymbol"></a>
+        <a class="remove-button" ng-click="tagList.remove($index)" ng-bind="options.removeTagSymbol" ng-hide="disabled"></a>
       </li>
     </ul>
     <input class="input"
@@ -15,6 +15,7 @@
            ng-paste="eventHandlers.input.paste($event)"
            ng-trim="false"
            ng-class="{'invalid-tag': newTag.invalid}"
+           ng-disabled="disabled"
            ti-bind-attrs="{type: options.type, placeholder: options.placeholder, tabindex: options.tabindex, spellcheck: options.spellcheck}"
            ti-autosize>
   </div>

test/tags-input.spec.js

@@ -1367,6 +1367,31 @@ describe('tags-input directive', function() {
         });
     });
 
+    describe('ng-disabled integration', function () {
+        it('disables the input', function () {
+            // Arrange/Act
+            compile('ng-disabled="true"');
+
+            // Assert
+            expect(getInput()[0].disabled).toBe(true);
+        });
+
+        it('is bound', function () {
+            // Arrange
+            $scope.disabled = false;
+            compile('ng-disabled="disabled"');
+            var input = getInput()[0];
+            expect(input.disabled).toBe(false);
+
+            // Act
+            $scope.disabled = true;
+            $scope.$digest();
+
+            // Assert
+            expect(input.disabled).toBe(true);
+        });
+    });
+
     describe('autocomplete registration', function() {
         var autocompleteObj;
 

test/test-page.html

@@ -64,7 +64,7 @@
         </tags-input>
         <span class="input-group-addon">.00</span>
     </div>
-<p></p>
+    <p></p>
     <div class="input-group input-group-sm" style="width: 600px">
         <span class="input-group-addon">@</span>
         <tags-input ng-model="tags">
@@ -92,6 +92,10 @@
       <input type="text" class="form-control"/>
       <span class="glyphicon glyphicon-ok form-control-feedback"></span>
     </div>
+    <p></p>
+    <tags-input ng-model="tags" ng-disabled="true">
+    </tags-input>
+    <p></p>
   <script type="text/javascript">
     angular.module('app', ['ngTagsInput'])
         .controller('Ctrl', function($scope, $q) {