ngModel is locked into the isolate scope when used on a component

[IgorMinar]

When ngModel directive is used on an element that represents a component (implemented via a directive with isolate scope), ngModel is locked into this isolate scope and in order to get out and make ngModel useful the ngModel expression has to be prefixed with $parent.

so instead of:

{{my.model}}
<my-component ng-model="my.model"></my-component>

one has to write:

{{my.model}}
<my-component ng-model="$parent.my.model"></my-component>

this is non-intuitive and might be hard to debug for developer unfamiliar with what's going on.

the solution must however take into account that it's possible to use ngModel within the template of the isolated component, in which case we must not leak the model outside of the component.

[IgorMinar]

btw the foodme app that we created as a tutorial app suffers from this issue: https://github.com/IgorMinar/foodme/blob/master/app/views/restaurants.html#L13

[mprobst]

Another drawback: the use-site has to write $parent.my.model, so if you want to provide a re-usable component, the implementation of it leaks to all users of the component :-(

[jasonkuhrt]

@IgorMinar I just ran into this issue myself trying to create an angular component. Isolate scope seems to be by-far the most idiomatic looking way of writing directives but nearly 100% of the time the isolate-ness has been too agressive and made it impractical to use. Really frustrating. It seems like the problem is a design one, not a bug or anything.

Any advice regarding future plans for isolate?

[MikeMcElroy]

FYI, when I ran into this problem, I used < ng-model="portal.myVar" portal="parentScopeVar" >
Where this was my isolate scope definition:
{
...
portal: "="
...
}

Which then made changes to (in the parent scope): parentScopeVar.myVar
Conceptually, it opens a "portal" to the parent scope through which ngModel can work.

Not a particularly elegant workaround, but it worked nicely, at least.

[jasonkuhrt]

I just ran into this again. Hard. Gah... this issue stands in the way of a cow-path I'm afraid. Its pretty critical to creating angular components.

@mhevery @IgorMinar Could $setViewValue support an optional second param for scope?

controller.$setViewValue(foo, scope.$parent);

There must be a better way than ^ though.

[caiotoon]

i have a suggestion. I believe all that must be done is to provide a way to the user instruct a bi-directional bind without specifying the local property name, but the name of attribute that contains the local property name.

Look, this is going to fail:

<my-component ng-model="my.model"></my-component>

scope: {
  ngModel: '=ngModel'
}

Currently, we are saying that when the user changes $scope. ngModel we'll reflect to $scope.$parent.my.model. All we got to do is to provide an attribute binding, something like this:

scope: {
  '=ngModel': '=ngModel'
}

So instead of binding local.ngModel to parent.my.model, we bind local.my.model (as ng-model="my.model") to parent.my.model. This would solve the problem and let it transparent to any directive or the outside user, requiring no refactoring at directives at all. Also, any other directive that hits the same problem can be easily circumvented with this approach.

I can try to implement it if Angular team approve this approach.

[il-juggler]

in the input.js we have:

var ngModelGet = $parse($attr.ngModel),
ngModelSet = ngModelGet.assign;

maybe explicity modifing the ngModelCtrl by asking for them in the link of the component so you can make something like
ngModel.$setContext(scope)
//or
ngModel.$setContext($scope.parent)

auto binding at the parser everything the model is setting/getting

[dobladez]

This is the workaround I currently use on my directive:
...
scope: {
id: '@', // any custom attribute
outterModel: '=ngModel' // get ahold of the model
},
...
// keep model in both scopes in sync:
scope.$watch('outterModel', function(val, old) {
scope.$eval(attrs.ngModel + ' = outterModel');
});
scope.$watch(attrs.ngModel, function(val, old) {
scope.outterModel = val;
});

I got the original idea form here:
http://stackoverflow.com/questions/15269737/why-is-ngmodel-setviewvalue-not-working-from

[gonzaloruizdevilla]

@dobladez 's workaround has been useful for me too.

[il-juggler]

Please checkout this solution

#2904

[hon2a]

As is often the case with Angular, the easiest work-around is simple element nesting.

<div ng-model="">
   <my-component />
</div>

.directive('myComponent', function () {
   return {
      scope: {},
      require: '^ngModel'
      /* ... */
   };
});

[il-juggler]

@hon2a yeah! it is but not it enough elegant

[basarat]

Yup from : http://stackoverflow.com/a/15272359/390330

scope: {
    model: '=ngModel'
}

And then in your linking function keep both in sync:

// Bring in changes from outside: 
scope.$watch('model', function() {
    scope.$eval(attrs.ngModel + ' = model');
});

// Send out changes from inside: 
scope.$watch(attrs.ngModel, function(val) {
    scope.model = val;
});

The solution by @inzurrekt is nice
But my number 1 preference would be to have it more natively supported: #1924 (comment)

[caiotoon]

I'd still rather to have a native solution, that would make this sync transparent to the developer, making it eligible to further optimizations out of the box.

So I still think an additional signature would solve this problem, like here #1924 (comment)

Basically, allowing the user to bind to the same value as the attribute. This have a bonus of working for any other attribute we might need.

[basarat]

@caiotoon I agree, that would be the ultimate solution. But I would prefer a syntax more consistent with what's already there i.e. @,=,&. Perhaps ^

<my-component ng-model="my.model"></my-component>

scope: {
  model: '^ngModel'
}

From an implementation logic point of view it would mean that if you (within the directive) do:

scope.model = 123;

that would set the following for you, automatically, using $parse internally:

scope.$parent.my.model = 123; 

Additionally with ^ you would still get the behaviour you get from =