A custom directive is being developed to implement tab functionality using the latest version of AngularJS (v1). The directive includes a controller that exposes an API to child directives, with isolated scopes in all directives:
Parent Directive
scope: {},
controller: function($scope) {
$scope.values = [];
this.addValue = function(value) {
$scope.values.push(value);
}
}
Child Directive within the link function
scope: {},
transclude: true,
template: '<div ng-transclude></div>',
replace: true,
link: function(scope, element, attr, parentCtrl)
{
parentCtrl.addValues('test')
}
The child directive contains a custom HTML with its own controller: TestCtrl
function TestCtrl($scope){
var vm = this;
... other logic
}
Implementation
<parent>
<child>
<div ng-controller="TestCtrl as t">
<button ng-click="addValues('new_test')"></button>
</div>
</child>
</parent>
The goal is to call the "addValues" method from inside the directive's controller when the button is clicked.
How should the code be organized to achieve this?