AngularJS - Create a directive that uses ng-model and md-autocomplete

Question

I am trying to create a directive for md-autocomplete. I tried using the answer provide by AngularJS - Create a directive that uses ng-model, but it does not work for me.

My CodePen is here: http://codepen.io/colbroth/pen/QyMaQX/?editors=101.

The code is based on the Angular material demo for autocomplete at https://material.angularjs.org/latest/demo/autocomplete. I have multiple pages, which need an autocomplete field to select a state. I do not want to repeat the code for each web page component.

state-directive takes an md-autocomplete input, I need demoCtrl.selected state to reflect the same value in both cases. But when I update the input element, the state-directive does not reflect this and vice versa.

<input ng-model="demoCtrl.selectedState">

<state-directive ng-model="demoCtrl.selectedState">...</state-directive>

Please post the code here on SO. – diatrevolo Jan 14 '16 at 15:55 — diatrevolo, Jan 14 '16 at 15:55

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

You are on the right track. Your problem is that your model is a string - a primitive in javascript but a ngModel always needs to be an object if you want to avoid these kind of problems.

Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved. (See this example for a quick illustration of the problem.)

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models.

Taken from Understanding-Scopes It also links to this Youtube video - 3 minutes of well invested time

  function DemoCtrl() {
    var self = this;
    self.state = {
      selected: "Maine"
    };
  }

Fixed codepen

AngularJS - Create a directive that uses ng-model and md-autocomplete

1 Answers1