Access directive's isolate scope from within transcluded content

Question

I\'m not sure if this is actually possible, but I\'m essentially wanting a reverse of the \'&\' isolate scope in AngularJS. Here is a Plunkr to demonstrate.

Basicall

Answer 1

It is my understanding that adding ng-repeat to an element creates a new scope, in order for the repeating content to be correctly bound. You may need an additional $parent in that chain, such as $parent.$$nextSibling, in order to step up to the level that is adjacent to the directive's isolate scope.

Answer 2

Here is a plunk that solves your current problem. I am not sure what you are attempting to do. But as far as I know, there is no way of calling something in the isolate scope from an external scope. Ofcourse, you could setup a two way bound variable between the isolate scope and the external scope, change the variable in the external scope and $watch for it on the isolate scope ( this will work like an eventing mechanism )... That is one way of doing what you are attempting to do.. if you insist on it.

Alternatively, there is a mechanism to call a function on the external scope from the isolate scope. Its kind of like a callback.

See this http://plnkr.co/edit/5MT4vo9qXtV6nQikfEiH?p=preview

Answer 3

Although possible, the solution I present is a hack, as it uses a scope internal variable, $$prevSibling.

Inside your transcluded content, you are inside the transcluded scope. The directive's isolate and transcluded scopes are siblings. To get from the transcluded scope to the isolate scope, you can use $$prevSibling. (To get from the isolate scope to the transcluded scope, you can use $$nextSibling.)

So, this hack will work:

<a href="" ng-click="$$prevSibling.action()">Invoke the Directive Action</a>

To call a method on the controller scope, you need to specify that using & as @ganaraj already demonstrated:

<content-presenter controller-action="action()">

Then in your directive:

scope: { controllerAction: '&' },
template: ... +
   '<button ng-click="controllerAction()">Trigger Ctrl action()</button>' ...

Plunker

---

With ng-repeat (see Samuel's comment), each item creates a child scope of the transcluded scope. In the picture below, I only show one item to keep the picture smaller. Reverse the $$nextSibling brown arrow for $$prevSibling.

So the hack to get to method action() defined on the isolate scope from an ng-repeat child scope is

<div ng-repeat="item in items" ng-click="$parent.$$prevSibling.action()">

---

Update for Angular v1.3+:

Since Angular v1.3, the transcluded scope is now a child of the directive's isolate scope – they are no longer siblings. So to get from the transcluded scope to the isolate scope, use $parent.

With ng-repeat, each item still creates a child scope of the transcluded scope:

But to get to method action() defined on the isolate scope from an ng-repeat child scope, we now use

<div ng-repeat="item in items" ng-click="$parent.$parent.action()">