角材料-$ mdDialog自定义模板-ng-click指令中的函数？

Question

I've used $mdDialog.show() within a custom directive with a templateUrl property to access a custom template for the the dialog itself, in which I've included two buttons; a 'Cancel' button and a 'Confirm' button.

For each of these I've added an ng-click with calls to 'cancelLeaver()' and 'confirmLeaver()' functions, which I need to be able to write in the directive, but have no idea how I would do.

I've attempted to use the $mdDialog.then() functionality, but this didn't work because of having buttons in a custom view template.

How can I call functions from a view template's ng-click attribute that are written inside a separate directive?

HTML:

<md-dialog ng-controller="mainController" style="min-width: 30vw">

<md-dialog-content>

    <h2 class="md-title">Confirm leaver status</h2>

</md-dialog-content>

<md-dialog-content class="minus-padding-top">

    <p>Enter employee's leave date below</p>

    <br>

    <md-input-container class="md-prompt-input-container">

        <input id="leaveDate" name="leaveDate" ng-model="employee.leaveDate" ng-init="employee.leaveDate = currentDate" aria-label="Leave Date" required>

    </md-input-container>

</md-dialog-content>

<md-dialog-actions>

    <md-button ng-click="cancelLeaver()">Cancel</md-button>

    <md-button ng-click="confirmLeaver()" ng-disabled="!employee.leaveDate.length">Confirm</md-button>

</md-dialog-actions>

</md-dialog>

Directive:

app.directive('makeLeaver', function($window, $mdDialog, $mdToast, $timeout, $state) {
return {
    restrict: 'A',
    scope: {
        employee: '=',
    },
    controller: 'employeeDetailsController', 
    controllerAs: 'employeeDetails',
    bindToController: true,
    link: function(scope, element, attrs) {
        element.bind('click', function() {

            console.log('makeLeaver(' + '#' + scope.employee.id + ')');

            /* Show confirmation prompt dialog */
            $mdDialog.show({
                parent: angular.element('body'),
                clickOutsideToClose: true,
                templateUrl: 'views/employees/employeeDetails/dialogs/makeLeaver.html',
                targetEvent: element
            })

            /* ---------------- TRIED THIS BUT DIDN'T WORK ---------------- */
            scope.cancelLeaver = function() {
                console.log('cancelLeaver()');
                $mdDialog.hide();
            }

            scope.confirmLeaver = function() {
                console.log('confirmlLeaver()');
            }

        })
    }
}
})

Answer 1

You can use $rootScope.$broadcast('foo') and then receive it elsewher like $rootScope.on('foo'). another way would be to pass the scope through the function. Check out this tutorial .