Accessing parent scope in isolated directive

Question

I'm building click to edit directives, but have issues understanding how to access parent scope in an isolated directive.

Example: http://jsfiddle.net/ADukg/3591/

scope: {},

It works if I "unisolate" the scope removing scope: {}; but need the isolated scope.

UPDATE:

Done it adding

controller: 'FormCtrl',

To the directive. See http://jsfiddle.net/ADukg/3601/

Solution 1

You could use the $parent property on the isolate scope to get direct access to the parent scope, but normally you'll want to use attributes to specify which parent scope properties the directive needs to do its work.

If you need to change the parent scope properties in the directive, bind with = (two-way objects). If you only need the string values of the parent scope properties in the directive, bind with @ (one-way strings).

Solution 2

The given solution won't work if you pass an attribute with primitive type like 'string', 'long' .... etc The two-way binging works only with object.

Every scope object contains a special property called $parent which refers to its parent scope. The isolated scope also has a $parent property. But it refers to the enclosing controller/directive's scope.

To make it work with primitive attributes: you could bind your directive template to a controller. This will expose your directive to its parent and you can access by $parent.

Second solution is to not make an isolate scope (but i don't think it's your goal).