search

hakib / MassAutocomplete

Auto Complete for Angularjs applications with a lot to complete
MIT License
236 stars 64 forks source link

New scope lead to losing two-way binding #35

Closed OoDeLally closed 9 years ago

OoDeLally commented 9 years ago

Im using mass-autocomplete directive to wrap all my page, as I have autocompleted input everywhere in the page. Problem is that the directive creates a child scope. So all the variables that have been initialized by the controller are shaded by a new variable in the child scope. When I modify a variable with an input for example, i only change the child version, not the 'real' one. The problem doesnt occur when the variable is an object, as only the reference is copied in the child scope. See example here: http://jsbin.com/tevagiciji/edit?html,js,output

Do I have a wrong usage of mass-autocomplete ? How to overcome this problem ?

Thank you

hakib commented 9 years ago

Hey @OoDeLally,

As you said, primitves are not inheritaed by a child scope. If you want your child scope to have access to a variable defined on the controller (or any other non isolated parent scope) you need to define it as an object.

I dont see in your example any mass autocomplete suggestions box (e.g mass-autocomplete-item directives). Maybe explain a bit more about the actual use case.

Haki.

OoDeLally commented 9 years ago

It's not per se a mass-autocomplete problem. It's just that it creates a new scope, so I lose all my primitives. That's why I didn't bother adding an actual usage of the autocompletion. Is it bad practice to wrap the whole page into the mass-autocomplete directive?

hakib commented 9 years ago

The directive was designed to wrap the portion of the page the need to offer auto complete, so no, you are probably using it correctly. You can see in the example page that most of the page is wrapped in a mass-autocomplete directive.

OoDeLally commented 9 years ago

Yes, I'm still beginner at Angular, so I never came across this problem. But it appears it is a fairly common struggle for beginners. So much so that there are articles about it, that say "dont use primitives within a ng-model" and always use an object. That's the solution. https://github.com/angular/angular.js/wiki/Understanding-Scopes (1st paragraph) http://nathanleclaire.com/blog/2014/04/19/5-angularjs-antipatterns-and-pitfalls/ (1st point) https://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m Thanks for your help @hakib . Cheers!