javascript - Angular Material - $mdDialog 自定义模板 - ng-click 指令中的函数？

Question

我在带有 templateUrl 属性的自定义指令中使用了 $mdDialog.show() 来访问对话框本身的自定义模板，其中我包含了两个按钮； “取消”按钮和“确认”按钮。

对于其中每一个，我都添加了一个 ng-click 来调用“cancelLeaver()”和“confirmLeaver()”函数，我需要能够在指令中编写这些函数，但不知道如何执行做。

我尝试使用 $mdDialog.then() 功能，但这不起作用，因为自定义 View 模板中有按钮。

如何从 View 模板的 ng-click 属性调用编写在单独指令内的函数？

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>

指令:

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

您可以使用 $rootScope.$broadcast('foo')然后在其他地方接收它，例如 $rootScope.on('foo')。另一种方法是通过函数传递范围。查看this tutorial .