Call function on directive parent scope with directive scope argument
Update
You can also use & to bind the function of the root scope (that is actually the purpose of &).
To do so the directive needs to be slightly changed:
app.directive('toggle', function(){ return { restrict: 'A', template: '<a ng-click="f()">Click Me</a>', replace: true, scope: { toggle: '&' }, controller: function($scope) { $scope.toggleValue = false; $scope.f = function() { $scope.toggleValue = !$scope.toggleValue; $scope.toggle({message: $scope.toggleValue}); }; } };});You can use like this:
<div toggle="parentToggle(message)"></div>You could bind the function using =. In addition ensure the property name in your scope and tag are matching (AngularJS translates CamelCase to dash notation).
Before:
scope: { OnToggle: '&'}After:
scope: { onToggle: '='}Furthermore don't use on-toggle="parentToggle({value: toggleValue})" in your main template. You do not want to call the function but just passing a pointer of the function to the directive.