我可以为变量设置 angular-ui 警报超时吗?
Can I set an angular-ui alert timeout to a variable?
我正在尝试创建一个 angular-ui-bootstrap 警报,其中以编程方式设置超时。我在 angular-ui docs 中读到了超时解除 属性。
这似乎有效:
<uib-alert ng-repeat="alert in alerts" dismiss-on-timeout=5000 type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
但是,我可以使用变量执行以下操作吗?它似乎不起作用:(
<uib-alert ng-repeat="alert in alerts" dismiss-on-timeout="{{alert.timeout}}" type="{{alert.type}}" close="closeAlert($index)" >{{alert.msg}}</uib-alert>
控制器:
angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) {
$scope.alerts = [
{ type: 'danger', timeout: 5000, msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', timeout: 5000, msg: 'Well done! You successfully read this important alert message.' }
];
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!'});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
});
开始吧:
- 好像真的angular-ui Alert 不提供使用它的可能性。我已经调试了它并自己进行了更改,如果您对以下内容感兴趣:
ui-bootstrap-tpls-0.14.2.js:
angular.module('ui.bootstrap.alert', [])
.controller('UibAlertController', ['$scope', '$attrs', '$timeout', function($scope, $attrs, $timeout) {
$scope.closeable = !!$attrs.close;
debugger;
if (angular.isDefined($scope.dismissOnTimeout)) {
$timeout(function() {
$scope.close();
}, parseInt($scope.dismissOnTimeout, 10));
}
}])
.directive('uibAlert', function() {
return {
controller: 'UibAlertController',
controllerAs: 'alert',
templateUrl: function(element, attrs) {
return attrs.templateUrl || 'template/alert/alert.html';
},
transclude: true,
replace: true,
scope: {
type: '@',
close: '&',
dismissOnTimeout: '=',
},
link: function link(scope, element, attrs) {
debugger;
console.log("link");
}
};
});
在你的 "app.js" 添加到你的 "AlertController":
$scope.timeout = 1000;
并且在您的 HTML 文件中:
<uib-alert ng-repeat="alert in alerts" dismiss-on-timeout="timeout" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}, {{alert.timeout}}</uib-alert>
我从 angularjs 中 fork 了 demo plunkr 并添加了我自己的 angular-ui-bootstrap 代码... Here
我正在尝试创建一个 angular-ui-bootstrap 警报,其中以编程方式设置超时。我在 angular-ui docs 中读到了超时解除 属性。
这似乎有效:
<uib-alert ng-repeat="alert in alerts" dismiss-on-timeout=5000 type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
但是,我可以使用变量执行以下操作吗?它似乎不起作用:(
<uib-alert ng-repeat="alert in alerts" dismiss-on-timeout="{{alert.timeout}}" type="{{alert.type}}" close="closeAlert($index)" >{{alert.msg}}</uib-alert>
控制器:
angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) {
$scope.alerts = [
{ type: 'danger', timeout: 5000, msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', timeout: 5000, msg: 'Well done! You successfully read this important alert message.' }
];
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!'});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
});
开始吧:
- 好像真的angular-ui Alert 不提供使用它的可能性。我已经调试了它并自己进行了更改,如果您对以下内容感兴趣:
ui-bootstrap-tpls-0.14.2.js:
angular.module('ui.bootstrap.alert', [])
.controller('UibAlertController', ['$scope', '$attrs', '$timeout', function($scope, $attrs, $timeout) {
$scope.closeable = !!$attrs.close;
debugger;
if (angular.isDefined($scope.dismissOnTimeout)) {
$timeout(function() {
$scope.close();
}, parseInt($scope.dismissOnTimeout, 10));
}
}])
.directive('uibAlert', function() {
return {
controller: 'UibAlertController',
controllerAs: 'alert',
templateUrl: function(element, attrs) {
return attrs.templateUrl || 'template/alert/alert.html';
},
transclude: true,
replace: true,
scope: {
type: '@',
close: '&',
dismissOnTimeout: '=',
},
link: function link(scope, element, attrs) {
debugger;
console.log("link");
}
};
});
在你的 "app.js" 添加到你的 "AlertController":
$scope.timeout = 1000;
并且在您的 HTML 文件中:
<uib-alert ng-repeat="alert in alerts" dismiss-on-timeout="timeout" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}, {{alert.timeout}}</uib-alert>
我从 angularjs 中 fork 了 demo plunkr 并添加了我自己的 angular-ui-bootstrap 代码... Here