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

问题描述

我需要使用适当的警告和助手为我的项目，发现角材料是真棒。 。然而，而不是在每个控制器中的几行粘贴，因为我需要重新使用它们。

解决方案

我需要设置这些作为一个工厂，所以我可以从任何的控制器调用它们。我觉得他们非常有帮助的可能是使用的人的。

警告

\r

\r

（函数（）{\r
    使用严格的;\r
    app.factory（showAlert，[$ mdDialog功能（$ mdDialog）{\r
        返回功能（标题，内容，EV）{\r
            $ mdDialog.show（\r
                $ mdDialog.alert（）\r
                .parent（angular.element（document.querySelector（'＃popupContainer'）））\r
                .clickOutsideToClose（真）\r
                .title伪（职称）\r
                .textContent（内容）\r
                。好的好的'）\r
                .targetEvent（EV））;\r
        };\r
    }]）;\r
}）（）;

\r

\r

\r

1. 从任何控制器通过将工厂名称showAlert'到控制器调用。


2. 确保您从HTML传递'$事件例如NG-点击=的testAlert（$事件）


3. 调用如下：

\r

\r

app.controller（'someController'，showAlert）{\r
    $ scope.testAlert =功能（事件）\r
    {\r
      showAlert（'报警名称在这儿，这是警告邮件正文'，EV）;\r
    }\r
}

\r

\r

\r

---

信息助手

\r

\r

（函数（）{\r
    使用严格的;\r
    app.factory（showHelper，[$ mdToast，$超时功能（$ mdToast，$超时）{\r
        返回功能（内容，的startTime，持续时间）{\r
            $超时（函数（）{\r
                $ mdToast.show（\r
                    $ mdToast.simple（）\r
                    .textContent（内容）\r
                    .POSITION（'左下角'）\r
                    .hideDelay（持续时间* 1000）\r
                ）;\r
            }，startTime时* 1000）;\r
        };\r
    }]）;\r
}）（）;

\r

\r

\r

1. 通过将工厂名称showHelper'到控制器从任何控制器调用。


2. 传递信息，及时启动助手，结束辅助时间。


3. 使用多个帮手，在未来帮助计划开始前的previous帮手已经结束时，请务必


4. 我乘以1000控制器
来使用秒

5. 调用如下：

\r

\r

app.controller（'someController'，showHelper）{\r
$ scope.testAlert =功能（）\r
{\r
showHelper（我的第一个帮手'，1,4）;\r
showHelper（我是第二个帮手，6,2）;\r
}\r
}

\r

\r

\r

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.

Alert

(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. Called from any controller by passing the factory name 'showAlert' to the controller.
2. Make sure you pass the '$event' from the html e.g. ng-click="testAlert($event)"
3. Called as follows

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

---

Information Helper

(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. Called from any controller by passing the factory name 'showHelper' to the controller.
2. Pass the message, time to start the helper and the time to end the helper.
3. Make sure when using more than one helper that the previous helper has ended before the next helper is scheduled to begin
4. I multiplied by 1000 to use seconds in the controller
5. Called as follows

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

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