Merge pull request #8 from the-software-factory/MH-2619

Added autogrow on css properties change

README.md

@@ -55,3 +55,11 @@ You can set the initial line number using `rows` attribute:
 ```html
 <textarea autogrow rows="1"></textarea>
 ```
+
+
+### Autogrow on css properties change
+
+You can define which CSS properties have to be watched in order to trigger the auto-growing:
+```html
+<textarea autogrow="font-family,font-size"></textarea>
+```

angularjs-autogrow.js

@@ -62,6 +62,29 @@
 
                 $scope.$watch($attrs.ngModel, $scope.autogrowFn);
 
+                // Extract css properties to spy on
+                var spyProps = $attrs.autogrow ? $attrs.autogrow.split(',') : [];
+                angular.forEach(spyProps, function(property) {
+                  // Set a watcher on each property
+                  $scope.$watch(
+                    function() {
+                      return $element.css(property);
+                    },
+                    styleChangedCallBack
+                  );
+                });
+
+                /**
+                 *
+                 * @param newValue
+                 * @param oldValue
+                 */
+                function styleChangedCallBack(newValue, oldValue) {
+                  if (newValue !== oldValue) {
+                    $scope.autogrowFn();
+                  }
+                }
+
                 /**
                  * Auto-resize when there's content on page load
                  */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angularjs-autogrow",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "AngularJS 1.x directive for auto-grow / auto-resize of textarea elements",
   "main": "angularjs-autogrow.js",
   "scripts": {