$ mdDialog.show()をtemplateUrlプロパティを持つカスタムディレクティブ内で使用して、ダイアログ自体のカスタムテンプレートにアクセスしました。ここでは、2つのボタンが含まれています。 「キャンセル」ボタンと「確認」ボタンがあります。
これらのそれぞれについて、「cancelLeaver()」と「confirmLeaver()」関数の呼び出しでng-clickを追加しました。これはディレクティブで記述できる必要がありますが、どのようにするだろう。
私は$ mdDialog.then()機能を使用しようとしましたが、これはカスタムビューテンプレートにボタンがあるため機能しませんでした。
ビューテンプレートの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()');
}
})
}
}
})