- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
Die Idee ist, Direktiven zu verwenden, um es zu implementieren, aber ich stecke fest und weiß nicht, wie ich die API dem Controller zugänglich machen soll
Ich möchte die API im Controller aufrufen, wenn der Toast erscheint xxx.showToast, aber ich weiß nicht, wie ich diese Schnittstelle erhalten kann, und die Direktive kann nicht als Abhängigkeitsinjektion verwendet werden. Ich hoffe, Sie können sie angeben mir einen Rat.
曾经蜡笔没有小新2017-06-28 09:28:14
你directive接过去写就可以直接使用了
.toast-box{
position:absolute;
top:45%;
z-index:99;
max-height:250px;
overflow-y:auto;
margin:0 auto;
float:left;
left:50px;
right:50px;
text-align:center;}
.toast-top{
top:0;}
.toast-bottom{
top:auto;
bottom:0;}
.toast-box .toast-item{
display:inline-block;
margin-top:5px;
padding:0 20px;
max-width:100%;
height: 40px;
line-height: 40px;
color:#fff;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
border-radius:6px;
font-size: 14px;
background-color: rgba(0, 0, 0, 0.8);}
.toast-box .toast-item.toast-success{
background-color: rgba(40,165,76, 0.8);}
.toast-box .toast-item.toast-error{
background-color: rgba(217,83,79, 0.8);}
.toast-box .toast-item.toast-warn{
background-color: rgba(240,173,78, 0.8);}
.toast-box .toast-item.toast-info{
background-color: rgba(3,155,229, 0.8);}
angular.module('app').directive('toast', function() {
return {
restrict: 'E',
require: 'ngModel',
scope: {
ngModel: '='
},
link: function (scope, element, attr, ctrl) {
/*
* Read before you modify
* this is a Object Sample :
{text:"prompt content",type:"prompt style",timeout:"display time",max:"Display maximum number"}
* If you need to add attributes! Please update the Object Sample
*/
var objSample = { text: "prompt content", type: 4, timeout: 3000, max: 3 };
var position = attr.position||'center';
$('.toast-'+position).remove();
var box = $('<p class="toast-box toast-' + position + '"></p>').appendTo('body');
scope.$watch('ngModel', function (newValue) {
if (!newValue) return;
var value;
if (angular.isString(newValue)) {
value = { text: newValue };
} else {
value = angular.copy(newValue);
}
var timeout = isNaN(value.timeout) ? objSample.timeout : value.timeout;
if (value.text != undefined && value.text != "") {
var isMax = box.find("p").length >= (value.max || objSample.max)
if (isMax) return;
//var item = $('<p class="toast-item toast-' + getToastClass(value.type) + ' animated fadeInDown">' + value.text + '</p><br/>').appendTo(box);
var item = $('<p class="toast-item toast-' + getToastClass(value.type) + '">' + value.text + '</p><br/>').appendTo(box);
setTimeout(function () {
//item.addClass('fadeOutUp');
setTimeout(function () {
item.remove();
}, 500);
}, timeout);
}
});
}
};});
function getToastClass(type) {
var toast_class;
switch (type)
{
case 1:
toast_class = "success";
break;
case 2:
toast_class = "error";
break;
case 3:
toast_class = "warn";
break;
case 4:
toast_class = "info";
break;
default:
toast_class = "undefined";
break;
}
return toast_class}
<toast ng-model="toast" position="center"></toast>
$scope.toast = { text: "Hellow", type: 1, timeout: 1000，max:2 };