How to append a directive to another directive which calls a function from controller.

Question

I'm trying to append a directive which occurs when an event is fired via the $watch function in angular. The first directive updater would insert a custom element <confirmation /> into my view. confirmation should have it's respective angular bindings.

after it's inserted I want the function startChange() which resides in my MainCtrl to fire inside the new confirmation directive.

I've made a plnkr http://plnkr.co/edit/BEozKyRZ0rJMz2e0jyp0?p=preview

Any help would be hugely appreciated.

Answer 1

First off...

There shouldnt be a '.' between the (el) and the ($scope)

var ngEl = $compile(el).($scope);

remove the dot and it will fix the app not being defined in the console.

var ngEl = $compile(el)($scope);

Next to get the error in the console of the startChange function not being defined, name space it on the scope of the directive and be sure to pass it into the isolate scope as well.

HTML:

  <confirmation message="Please Select something" state="state" startChange="startChange()" class="background-state-{{ state }}">someText</confirmation>

Directive:

 scope : {
    message : '@',
    state: '=',
    startChange: '&'
 }

In the linker:

scope.startChange();

I'm still not sure if this is the situation you would like as the other directive update isn't being used anywhere that I can see...

Here is your plunker with my changes: http://plnkr.co/edit/8VoJSj7bHUkaEjUFrn3i?p=preview