Call parent from different directive when using isolated scope

by greatCar

HTML

<!-- https://stackoverflow.com/questions/17583004/call-a-controller-function-from-a-directive-without-isolated-scope-in-angularjs-->
<div ng-app="myModule" ng-controller="myController">
    <input ng-model="showIt"></input>
    <button ng-hide="$parent.hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button>
</div>

JavaScript

var myModule = angular.module('myModule', []);
myModule
    .directive('confirm', function () {
        return {
            restrict: 'A',
            scope: {
                confirm: '@',
                confirmAction: '&'
            },
            link: function (scope, element, attrs) {
                element.bind('click', function (e) {
                    if (confirm(scope.confirm)) {
                        scope.confirmAction();
                    }
                });
            }
        };
    })
    .controller('myController', function($scope) {
        $scope.doIt = function() { alert('did it!'); };
        $scope.hideButton = function() { return $scope.showIt == "yes"; }
    });