Let me share a simple example...
Here is the code snippet:
angular
.module('app', [])
.directive('parentDirective', parentDirective)
.directive('childDirective', childDirective);
function parentDirective() {
return {
restrict: 'E',
scope: true,
//template: 'My job is {{job}}',
controller: function($scope) {
$scope.job = 'gardener';
$scope.say = function(job) {
$scope.job = job;
alert($scope.job);
}
}
};
}
function childDirective() {
return {
restrict: 'E',
link: function(scope) {
scope.say('landscaper');
}
};
}
The Markup is as follows:
<parent-directive>
<child-directive></child-directive>
</parent-directive>
The functionality works perfectly. However, I am facing an issue when trying to add a template to the parentDirective while achieving the same result. Upon uncommenting the template property, the binding remains unchanged and the alert is not triggered anymore. Can anyone provide a brief explanation of what is happening in this scenario? Maybe even assist in enhancing my example? I find that learning through examples is most effective :)