Take a look at this Plunk example to understand better.
I'm attempting to create a test scenario for accessing complex directives, but I encounter an error when trying to call a method from the parent directive:
Parent Directive
app.directive('topParentDirective', [
'$compile',
function($compile){
return {
restrict: 'E',
transclude: true,
template: '<h3>I\'m the parent directive.</h3><div ng-transclude></div>',
controller: function($scope) {
$scope.ActivateMe = function(callerName) {
alert('Parent activated from caller ' + callerName);
};
}
};
}
]);
Child Directive
app.directive('interactingChildDirective', [
'$compile',
function($compile){
return {
scope: {
name: '@'
},
restrict: 'E',
require: ['^topParentDirective'],
templateUrl: 'interactingChildDirective.html',
link: function($scope, $elem, $attrs, $ctrl) {
var self = {};
console.log($ctrl);
$scope.CallTopParent = function() {
$ctrl.ActivateMe($attrs.name);
};
}
};
}
]);
interactingChildDirective.html
Includes:
My name is {{name}}, <button ng-click="CallTopParent()">Click me</button>!
HTML
<body ng-app="ngApp">
<div ng-controller="myController">
<top-parent-directive>
<interacting-child-directive name="Child 1"></interacting-child-directive>
</top-parent-directive>
</div>
</body>
Problem
TypeError: $ctrl.ActivateMe is not a function
at n.$scope.CallTopParent
This issue arises because $ctrl does not seem to be correct.
How can this be fixed? It appears to be something quite simple...