Revised Response
In consideration of the most recent specification:
I am working on invoking the directive function (namely updateMap) from the controller.
To achieve this, you can utilize a Service to facilitate data sharing between Controllers and Isolated Directives. In the provided example, the Service contains the function that will be executed. Each directive, when triggered, will assign its own updateMap() function to the Service. Subsequently, the Controller within the onFolderPathClicked() method will call the Service's executeFunction() function, initiating the previously set function execution.
script.js:
var module = angular.module('testApp', []);
module.service('updateMapService', function(){
var updateMapFunction = null;
this.executeFunction = function(){
updateMapFunction();
};
this.setFunction = function(fn){
updateMapFunction = fn;
};
});
module.controller('crtl', function($scope, updateMapService) {
$scope.onFolderPathClicked = function(){
updateMapService.executeFunction();
};
});
module.directive('folder', function($compile) {
return {
restrict: 'E',
scope: {
id: '@',
folderPath: "="
},
template: '<p ng-click="onFolderClicked()">{{id}}</p>',
controller: function($scope, $element, updateMapService) {
$scope.onFolderClicked = function(){
updateMapService.setFunction(updateMap);
addFolder();
};
var addFolder = function() {
$scope.folderPath = $scope.id + ":click here for calling update map";
var el = $compile('<folder id="n" folder-path="folderPath"></folder>')($scope);
$element.parent().append(el);
};
var updateMap = function() {
alert('inside updateMap()..' + $scope.id);
}
}
}
});
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="testApp" ng-controller="crtl">
<div>FolderPath : <a ng-click="onFolderPathClicked()">{{ folderPath }}</a> </div>
<folder id="1" folder-path="folderPath"></x-folder>
<folder id="2" folder-path="folderPath"></folder>
</div>
</html>
An alternative approach would involve moving folder-path into a Service to prevent the need for multiple attribute passes. Doing so eliminates redundancy by setting and retrieving it once in a Service for better code reuse efficiency.