fix(select): Fixed select problem with ngModel + binding events properly

#3
InfomediaLtd · Feb 24, 2016 · fe8933c · fe8933c
1 parent 70a1b09
commit fe8933c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -50,10 +50,12 @@
     "reflect-metadata": "0.1.2",
     "rimraf": "^2.4.4",
     "run-sequence": "^1.1.5",
+    "rxjs": "^5.0.0-beta.2",
     "semantic-release": "^4.3.5",
     "tsc": "^1.20150623.0",
     "tsd": "^0.6.5",
-    "typescript": "^1.7.5"
+    "typescript": "^1.7.5",
+    "zone.js": "^0.5.15"
   },
   "config": {
     "commitizen": {
@@ -71,7 +73,7 @@
       "materialize": "github:Dogfalo/materialize@^0.97.5",
       "reflect-metadata": "npm:reflect-metadata@^0.1.3",
       "rxjs": "npm:rxjs@^5.0.0-beta.2",
-      "zone.js": "npm:zone.js@^0.5.14"
+      "zone.js": "npm:zone.js@^0.5.15"
     },
     "devDependencies": {
       "clean-css": "npm:clean-css@^3.4.9",

diff --git a/src/materialize-directive.ts b/src/materialize-directive.ts
@@ -25,6 +25,8 @@ export class MaterializeDirective implements AfterViewInit,DoCheck {
 
     private previousValue = null;
 
+    private changeListenerShouldBeAdded = true;
+
     constructor(private _el: ElementRef) {
     }
 
@@ -36,25 +38,35 @@ export class MaterializeDirective implements AfterViewInit,DoCheck {
       this._functionName = functionName;
     }
 
-    ngAfterViewInit() {
+    private ngAfterViewInit() {
       this.performElementUpdates();
     }
 
-    ngDoCheck() {
-      if (this._functionName && this._functionName === "material_select") {
-        if (this._el.nativeElement.value!=this.previousValue) {
-          this.previousValue = this._el.nativeElement.value;
-          this.performElementUpdates();
-        }
+    private ngDoCheck() {
+      const nativeElement = this._el.nativeElement;
+      if (this.isSelect() && nativeElement.value!=this.previousValue) {
+        // handle select changes of the model
+        this.previousValue = nativeElement.value;
+        this.performLocalElementUpdates();
       }
       return false;
     }
 
-    performElementUpdates() {
+    private performElementUpdates() {
       // it should have been created by now, but confirm anyway
       if (Materialize && Materialize.updateTextFields) {
         Materialize.updateTextFields();
       }
+      // handle select changes from the HTML
+      if (this.isSelect() && this.changeListenerShouldBeAdded) {
+        const nativeElement = this._el.nativeElement;
+        const jQueryElement = $(nativeElement);
+        jQueryElement.on("change", e => nativeElement.dispatchEvent(new Event("input")));
+        this.changeListenerShouldBeAdded = false;
+      }
+      this.performLocalElementUpdates();
+    }
+    private performLocalElementUpdates() {
       if (this._functionName) {
         const jQueryElement = $(this._el.nativeElement);
         if (jQueryElement[this._functionName]) {
@@ -75,13 +87,11 @@ export class MaterializeDirective implements AfterViewInit,DoCheck {
             throw new Error("Couldn't find materialize function ''" + this._functionName + "' on element or the global Materialize object.");
           }
         }
-        // handle select
-        if (this._functionName === "material_select") {
-          jQueryElement.change((e) => {
-            this._el.nativeElement.dispatchEvent(new Event("input"));
-          });
-        }
       }
     }
 
+    private isSelect() {
+      return (this._functionName && this._functionName === "material_select");
+    }
+
 }