我可以为变量设置 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