How to set ng-model of <input> inside a nested directive

[ItsLeeOwen]

http://jsfiddle.net/ItsLeeOwen/vfH8s/

I'm trying to set the ng-model of the <input> element which is nested in the directive widget.

// the parent scope

function ParentCtrl($scope) {
    $scope.test = 'Parent Scope Value';
}​

// the directive widget

<my-element my-model="test" my-value="{{ test }}"></my-element>

// the template

<div><input type="text" ng-model="myModel" value="{{ myValue }}" /></div>

[Andy Joslin]

You won't be able to bind a simple string value like that.  When you try, it will create a memory copy of it, and then you'll have two versions of the string, one in each directive.

You'll want to put the string in an object, so when you pass the object to the directive it just creates a pointer to the same object as the parent directive.

Try something like this: http://jsfiddle.net/vfH8s/9/

[ItsLeeOwen]

On review of the accessor docs, it sounds as if this is exactly how I should be able to create a 2-way bind between a directive, and parent scope.

accessor - Set up getter/setter function for the expression in the widget element attribute to the widget scope. 
Given <widget my-attr='name'> and widget definition of scope: {myAttr:'prop'}, and parent scope {name:'angular'} then widget scope property myAttr will be a function such that myAttr()will return "angular" and myAttr('new value') will update the parent scope name property. This is useful for treating the element as a data-model for reading/writing.

Error: Expression 'myModel()' not assignable. at Error (unknown source)

It almost works, except the setter does not work inside the input ng-model="myModel()".  Is this a bug, or is the accessor not meant to be compatible with ng-model?

[Misko Hevery]

This is a short coming on our side. Can you file a RFE with the issue tracker?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/4vgd1Ol5ZKAJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[ItsLeeOwen]

https://github.com/angular/angular.js/issues/945

Ok thanks, I hope this communicates it clearly.

[ItsLeeOwen]

I'm thinking this is the workaround I'll use for now:   http://jsfiddle.net/ItsLeeOwen/FkCnY/

[Robert B. Weeks]

Hey Lee -

I always use a pattern like:

// bind from ei-server -> parent
scope.$watch('localModel', function(value) {
scope.serverNameModel(value);
});

// bind from parent -> ei-server
scope.$watch(function() {return scope.serverNameModel()}, function(value) {
scope.localModel = value;
});

to dual bind between the the parent and inner field.

For example:

http://jsfiddle.net/vaiism/reBSh/

I just didn't set as ng-model - but can work the same. Hope this is what you were asking about.