我可以爲變量設置angular-ui警報超時嗎？

我正嘗試創建一個angular-ui-bootstrap警報，其中超時值是以編程方式設置的。我閱讀了angular-ui docs中的超時解僱屬性。我可以爲變量設置angular-ui警報超時嗎？

這似乎工作：

<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); 
    }; 
});

來源

2015-10-19 Diné Bennett

看看你寫的東西好像沒什麼不對。你可以發佈控制器和'alert'的定義嗎？ –

@RicardoVelhote這樣做:)它是來自文檔的控制器，超時添加到警報。 –

嗯，我認爲現在調用「alert.type」還爲時過早，因爲你和ng-repeat在同一行。也許創建一個全局變量或第二個Controller到你的「body」標籤並在那裏首先創建一個超時。 –

這裏，我們去：

它真的象角的UI提示不提供的可能性如果你有興趣，我已經調試過它並自己做了修改：

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的demo plunkr分叉了，並添加了我自己的angular-ui-bootstrap代碼... Here

來源

2015-10-19 15:24:59

好的提示。但是你的代碼有一個小問題：如果用戶會動態改變超時值 - 它將不起作用。看到這個例子：http://plnkr.co/edit/YkUpFveriXntm342Qk17?p=preview。這裏用戶可以動態改變timeout的值+'dismissOnTimeout'通過''@''參數綁定。 – ababashka

@ababashka你是對的，很快就會更新我的代碼，以反映你的解決方案;） –

謝謝你，@ferto和@ababashka！我得到它的工作，非常感謝:) –

我可以爲變量設置angular-ui警報超時嗎？

回答

相關問題