AngularJS nested directives, inner directive's ng-click is not firing - angularjs

Question

This is a problem I'm having in my app and I am about to reproduce it in a simple example:
<div f-outer>
<div f-inner dat="dat">
<a href="javascript:" ng-click="run(dat, $event)">
Click Me
</a>
</div>
</div>
Clicking "Click Me", I'd expect the run function defined on the f-inner directive to execute. But it's not.
.directive('fOuter', function () {
return {
link: function (scope) {
scope.dat = { x: 1, y: 2 };
console.log('fOuter.link');
}
};
})
.directive('fInner', function () {
return {
restrict: 'A',
scope: {
dat: '='
},
link: function (scope) {
console.log('fInner.link');
scope.run = function (dat, $event) {
console.log('fInner.scope.run()', dat, $event);
};
}
};
})
I also
Here's the example:
http://jsfiddle.net/5QtJs/2/
I also added translude with no luck:
transclude: true,
template: "<div ng-transclude></div>",
http://jsfiddle.net/5QtJs/3/

Answer 1

You are on the right track with using transclude, presuming you want to include arbitrary content. In your example transclude is unnecessary. The ng-click call you are making is not finding your 'run' method in your directive. (Since, run is used in angular modules, I would advise against using in code). I've refactored your directive below.
<div ng-controller="Ctrl3">
<div f-outer>
<div f-inner dat="data">Will not show since using 'replace'</div>
</div>
</div>
.directive('fOuter', function () {
return {
link: function (scope) {
scope.dat = { x: 1, y: 2 };
console.log('fOuter.link');
}
};
})
.directive('fInner', function () {
return {
restrict: 'A',
replace: true,
scope: {
dat: '='
},
template: '<div>' +
'<a ng-click="run(dat, $event)">Click Me</a>' +
'</div>',
link: function (scope) {
console.log('fInner.link');
scope.run = function (dat, $event) {
console.log('fInner.scope.run()', dat, $event);
};
}
};
});