In the code snippet below:
HTML:
<body ng-controller="MainCtrl">
<main-dir data="data" on-update-map="updateMap(datalength)"></main-dir>
</body>
JS:
app.directive('mainDir', function () {
function DatasetDirective() {
var directive = {};
directive.restrict = "E";
directive.replace = false;
directive.scope = {
data: "=",
onUpdateMap: "&"
};
directive.templateUrl = 'dataset.html';
directive.controller = function($scope){
// set "datalength" on scope based on some logic here
$scope.datalength = $scope.data.length;
console.log($scope);
};
return directive;
}
return DatasetDirective();
});
dataset.html
<div>
<button ng-click="onUpdateMap()">click me</button>
</div>
Here's a link to see more details.
Essentially, I am setting a member on the isolate scope of the directive. However, when clicking a button within the directive template, a function in the Main Controller is triggered and the isolate scope member should be passed to the function. Instead of getting "3", it returns "undefined".
Any ideas on what could be causing this issue?