AngularJSを使用しようとしていますBootstrap説明のようなアラート here を「dismiss-on-timeout」属性で使用しています。この例では効果がありません。アラートは定期的に表示され、消えることはありません。
<alert type="warning" dismiss-on-timeout="2000">Alert text</alert>
ただし、サイトのng-repeatの例では機能します。
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" dismiss-on-timeout="2000">{{alert.msg}}</alert>
問題は、欠けているクローズ属性ですか?もしそうなら、配列の一部ではないアラートのクローズ関数をどのように記述しますか?
まあそれはうまくいきます、それはただdismissOnTimeout
ディレクティブがアラートディレクティブコントローラの close
method を呼び出すだけです。このコントローラは、今度は外側のスコープclose
メソッドを使用します。そのため、ディレクティブがそれを呼び出すことができるように、それを実装する必要があります。
<alert type="danger" close="closeAlert()" ng-if="show"
dismiss-on-timeout="2000">Something happened.</alert>
そしてコントローラーで:
$scope.show = true;
$scope.closeAlert = function(index) {
$scope.show = false;
};
実際には、変数($scope.show = false;
)アラートを非表示にします。画面に複数の以前のアラートを表示したくない場合を除いて、アラートを保持する配列が一度に1つの項目しか持てないことを確認するだけです。表示したアラートを削除するだけです。下記参照:
マークアップ
<uib-alert ng-repeat="alert in alerts" dismiss-on-timeout="2000" type="{{alert.type}}" close="closeAlert()">{{alert.msg}}</uib-alert>
コントローラ
//array to hold the alerts to be displayed on the page
$scope.alerts = [];
/**
*This function is used to Push alerts onto the alerts array.
*/
$scope.addAlert = function(type, message) {
//add the new alert into the array of alerts to be displayed.
$scope.alerts.Push({type: type, msg: message});
};
/**
*This function closes the alert
*/
$scope.closeAlert = function(index) {
//remove the alert from the array to avoid showing previous alerts
$scope.alerts.splice(0);
};
したがって、アラートを表示する場合は、次のようにします。
$scope.addAlert('success', 'My message');
私はそれを働かせることができなかった。より簡単な方法を次に示します。
マークアップ
<div uib-alert
data-closeable="true" <!-- sets the 'x' on the right for closing -->
close="closeAlert()" <!-- what the 'x' and the timeout will call -->
alert alert-{{ alert.level }}" <!-- sets the color (e.g. 'success' or 'danger') -->
ng-show="alert.show"> <!-- only show me when this is truthy -->
{{ alert.message }}
</div>
コントローラ
$scope.closeAlert = function() {
$scope.alert.show = false;
}
$scope.showAlertForFiveSeconds = function(){
$scope.alert.message = 'Something went wrong!');
$scope.alert.level = 'danger'; // red
$timeout(closeAlert, 5000); // close the alert in 5 seconds
}
基本的に私がしていることは、遅延コールを手動で設定してアラートを閉じて離れることです。
これを行うには、Angular $ timeoutサービスをコントローラの上部に注入する必要もあります。
私の提案は、それをどこからでも使用できるalertFactory
でラップすることです。
App.factory('alertFactory',['$rootScope',
function($rootScope) {
var alertService = {};
$rootScope.alerts = [];
// will automatidally close
// types are success, warning, info, danger
alertService.addAuto = function(type, msg, delay) {
var alert = {'type': type, 'msg': msg};
$rootScope.alerts.Push(alert);
if (!delay ) {
delay = 2500; // default delay is 2500ms
}
window.setTimeout(function() {
var index = $rootScope.alerts.indexOf(alert);
if (index > -1) {
$rootScope.alerts.splice(index, 1);
$rootScope.$apply(); // refresh GUI
}
}, delay);
}
return alertService;
}])
これを配置します。あなたの `index.html
<script src="components/angular-ui-bootstrap-bower/ui-bootstrap-tpls.js"></script>
...
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
のような呼び出し
App.controller('myCtrl', [ "alertFactory", function(alertFactory) {
var optionalDelay = 2500;
alertFactory.addAuto('success', 'my alert text', optionalDelay);
}]);
ここでの解決策は正しいですが、それは古くなっているので、ここが更新されたバージョンです。
ビュー内:(Angular UI Bootstrap)で更新)
<uib-alert type="{{alert.type}}" close="closeAlert()" dismiss-on-timeout="2000" ng-if="show">
{{alert.msg}}
</uib-alert>
コントローラ内:
$scope.show = true;
$scope.closeAlert = function() {
$scope.show = false;
};
$scope.alert = {type: 'danger', msg: 'Something gone wrong'};