1
我使用的是angular-toastr,我想在toastr裏面有一個動態內容,比方說,一個計數器,我怎樣才能在沒有其他實例的情況下更新它。如何將動態內容綁定到angular-toastr?
這裏是我的角度腳本:
// Code goes here
angular.module("myApp", ['toastr'])
.controller("myCtrl", myCtrl);
myCtrl.$inject = ["toastr"];
function myCtrl(toastr){
var vm = this;
vm.cont = 0;
vm.start = function(){
//I need create only one toastr with vm.cont update for each increment
toastr.info(vm.cont + " en espera", 'Transferencias y pagos', {
allowHtml: true,
extendedTimeOut: 0,
tapToDismiss: true,
timeOut: 0,
onHidden: vm.listWaitView
});
};
vm.increment = function(){
vm.cont++;
vm.start(); //function that trigger the toastr
};
}
我的觀點:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link data-require="[email protected]" data-semver="1.3.1" rel="stylesheet" href="https://rawgit.com/Foxandxss/angular-toastr/1.3.1/dist/angular-toastr.css" />
<script data-require="[email protected]" data-semver="1.3.1" src="https://rawgit.com/Foxandxss/angular-toastr/1.3.1/dist/angular-toastr.tpls.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl as ctrl">
<h1>Counter</h1>
<h2>{{ctrl.cont}}</h2>
<button ng-click="ctrl.increment();">Increment</button>
</body>
</html>
爲了您的方便我做了我在plunkr上傳一個簡單的腳本:
例子:
https://plnkr.co/edit/w7WbfwyYqkqxQWsAPCZz?p=preview
你懂了!它像一個魅力!謝謝! – fablexis