fix(tagsInput): Remove dependency on interpolation symbols

When the interpolation symbols are changed from the default ones
({{ and }}) the tagsInput directive's template is rendered invalid
since it's using the default interpolation symbols. To fix that, replace
that dependency with a new helper directive, tiBindAttrs, which binds
attributes to properties of the scope and keep those attributes always
up-to-date.

Closes #151

Gruntfile.js

@@ -20,6 +20,7 @@ module.exports = function(grunt) {
                     'src/auto-complete.js',
                     'src/transclude-append.js',
                     'src/autosize.js',
+                    'src/bind-attrs.js',
                     'src/configuration.js'
                 ],
                 out: 'build/<%= pkg.name %>.js',

src/bind-attrs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+/**
+ * @ngdoc directive
+ * @name tiBindAttrs
+ * @module ngTagsInput
+ *
+ * @description
+ * Binds attributes to expressions. Used internally by tagsInput directive.
+ */
+tagsInput.directive('tiBindAttrs', function() {
+    return function(scope, element, attrs) {
+        scope.$watch(attrs.tiBindAttrs, function(value) {
+            angular.forEach(value, function(value, key) {
+                attrs.$set(key, value);
+            });
+        }, true);
+    };
+});

templates/tags-input.html

@@ -8,12 +8,11 @@
     </ul>
     <input type="text"
            class="input"
-           placeholder="{{options.placeholder}}"
-           tabindex="{{options.tabindex}}"
            ng-model="newTag.text"
            ng-change="newTagChange()"
            ng-trim="false"
            ng-class="{'invalid-tag': newTag.invalid}"
+           ti-bind-attrs="{placeholder: options.placeholder, tabindex: options.tabindex}"
            ti-autosize>
   </div>
 </div>

test/bind-attrs.spec.js

@@ -0,0 +1,49 @@
+'use strict';
+
+describe('bind-attrs directive', function() {
+    var $scope, $compile,
+        element;
+
+    beforeEach(function() {
+        module('ngTagsInput');
+
+        inject(function($rootScope, _$compile_) {
+            $scope = $rootScope;
+            $compile = _$compile_;
+        });
+    });
+
+    function compile(value) {
+        element = $compile('<span ti-bind-attrs="' + value + '">')($scope);
+        $scope.$digest();
+    }
+
+    it('sets the element attributes according to the provided parameters', function() {
+        // Arrange
+        $scope.prop1 = 'Foobar';
+        $scope.prop2 = 42;
+
+        // Act
+        compile('{attr1: prop1, attr2: prop2}');
+
+        // Assert
+        expect(element.attr('attr1')).toBe('Foobar');
+        expect(element.attr('attr2')).toBe('42');
+    });
+
+    it('updates the element attributes when provided parameters change', function() {
+        // Arrange
+        $scope.prop1 = 'Foobar';
+        $scope.prop2 = 42;
+        compile('{attr1: prop1, attr2: prop2}');
+
+        // Act
+        $scope.prop1 = 'Barfoo';
+        $scope.prop2 = 24;
+        $scope.$digest();
+
+        // Assert
+        expect(element.attr('attr1')).toBe('Barfoo');
+        expect(element.attr('attr2')).toBe('24');
+    });
+});