用于信息助手和警报的可重用角材料对话框和 Toast [英] Reusable Angular Material Dialog and Toast for Information Helper and Alert

问题描述

我需要为我的项目使用合适的警报和助手，并发现有角度的材料很棒.但是，我没有在每个控制器中粘贴几行，因为我需要重用它们.

I needed to use an suitable alert and helper for my project and found angular material to be awesome. However instead of pasting in the few lines in each controller because I needed to reuse them.

推荐答案

我需要将它们设置为工厂，以便我可以从任何控制器调用它们.我发现它们非常有帮助，可能对某人有用.

I needed to set these up as a factory so I can call them from any controller. I find them very helpful might be of use to someone.

警报

(function () {
    'use strict';
    app.factory("showAlert", ["$mdDialog", function ($mdDialog) {
        return function (title, content, ev) {
            $mdDialog.show(
                $mdDialog.alert()
                .parent(angular.element(document.querySelector('#popupContainer')))
                .clickOutsideToClose(true)
                .title(title)
                .textContent(content)
                .ok('Ok')
                .targetEvent(ev));
        };
    }]);
})();

1. 通过将工厂名称showAlert"传递给控制器​​从任何控制器调用.
2. 确保您从 html 中传递了$event"，例如ng-click="testAlert($event)"
3. 调用如下

app.controller('someController', showAlert) {
    $scope.testAlert = function(event)
    {
      showAlert('Alert Title Goes Here', 'This is the alert message body.', ev);
    }
}

信息助手

(function () {
    'use strict';
    app.factory("showHelper", ["$mdToast", "$timeout", function ($mdToast, $timeout) {
        return function (content, startTime, duration) {
            $timeout(function () {
                $mdToast.show(
                    $mdToast.simple()
                    .textContent(content)
                    .position('bottom left')
                    .hideDelay(duration * 1000)
                );
            }, startTime * 1000);
        };
    }]);
})();

1. 通过将工厂名称showHelper"传递给控制器​​从任何控制器调用.
2. 传递消息、启动助手的时间和结束助手的时间.
3. 确保在使用多个助手时，前一个助手已在下一个助手计划开始之前结束
4. 我乘以 1000 以在控制器中使用秒
5. 调用如下

app.controller('someController', showHelper) {
	$scope.testAlert = function()
	{
		showHelper('I am the first helper', 1, 4);
		showHelper('I am the second helper', 6, 2);
	}
}

这篇关于用于信息助手和警报的可重用角材料对话框和 Toast的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！