fix(textfield): ng-model bindings now working and demo rendering fixed.

angular · Oct 2, 2014 · e8f456f · e8f456f
1 parent 03051d3
commit e8f456f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 19 deletions.
diff --git a/src/components/textField/demo1/index.html b/src/components/textField/demo1/index.html
@@ -9,15 +9,15 @@
   </material-toolbar>
 
   <material-content>
-    <form style="padding-left: 20px;">
-      <ig fid="i1" class="material-input-group-theme-light"></ig>
-      <ig fid="i2" class="material-input-group-theme-light-blue"></ig>
-      <ig fid="i3" class="material-input-group-theme-dark"></ig>
-      <ig fid="i4" class="material-input-group-theme-green"></ig>
-      <ig fid="i5" class="material-input-group-theme-yellow"></ig>
-      <ig fid="i6" class="material-input-group-theme-orange"></ig>
-      <ig fid="i7" class="material-input-group-theme-purple"></ig>
-      <ig fid="i8" class="material-input-group-theme-red"></ig>
+    <form style="padding: 20px;">
+      <ig fid="i1" value="data.i1" class="material-input-group-theme-light"></ig>
+      <ig fid="i2" value="data.i2" class="material-input-group-theme-light-blue"></ig>
+      <ig fid="i3" value="data.i3" class="material-input-group-theme-dark"></ig>
+      <ig fid="i4" value="data.i4" class="material-input-group-theme-green"></ig>
+      <ig fid="i5" value="data.i5" class="material-input-group-theme-yellow"></ig>
+      <ig fid="i6" value="data.i6" class="material-input-group-theme-orange"></ig>
+      <ig fid="i7" value="data.i7" class="material-input-group-theme-purple"></ig>
+      <ig fid="i8" value="data.i8" class="material-input-group-theme-red"></ig>
     </form>
   </material-content>
 

diff --git a/src/components/textField/demo1/script.js b/src/components/textField/demo1/script.js
@@ -2,20 +2,30 @@
 angular.module('formDemo1', ['ngMaterial'])
 
 .controller('AppCtrl', function($scope) {
-  $scope.data = {};
+  $scope.data = {
+    i1 : "Field #1",
+    i2 : "Field #2",
+    i3 : "Field #3",
+    i4 : "Field #4",
+    i5 : "Field #5",
+    i6 : "Field #6",
+    i7 : "Field #7",
+    i8 : "Field #8"
+  };
 })
 
 .directive('ig', function() {
   return {
     restrict: 'E',
     replace: true,
-    scope: {
-      fid: '@'
+    scope : {
+      fid : '@',
+      title : '=value'
     },
-    template: 
+    template:
       '<material-input-group>' +
         '<label for="{{fid}}">Description</label>' +
-        '<material-input id="{{fid}}" type="text" ng-model="data.description">' +
+        '<material-input id="{{fid}}" type="text" ng-model="title">' +
       '</material-input-group>'
   };
 });
diff --git a/src/components/textField/textField.js b/src/components/textField/textField.js
@@ -75,13 +75,13 @@ function materialInputDirective() {
       // When the input value changes, check if it "has" a value, and 
       // set the appropriate class on the input group
       if (ngModelCtrl) {
-        ngModelCtrl.$viewChangeListeners.push(function() {
-          inputGroupCtrl.setHasValue(!!ngModelCtrl.$viewValue);
+        //Add a $formatter so we don't use up the render function
+        ngModelCtrl.$formatters.push(function(value) {
+          inputGroupCtrl.setHasValue(!!value);
+          return value;
         });
-        ngModelCtrl.$render = function() {
-          inputGroupCtrl.setHasValue(!!ngModelCtrl.$viewValue);
-        };
       }
+
       element.on('input', function() {
         inputGroupCtrl.setHasValue(!!element.val());
       });