2016-02-11 57 views
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

回答

2

您是否正在尋找在創建新麪包之前清理現有面包。如果是的話,那麼試試下面的

toastr.clear(); 
toastr.info(vm.cont + " en espera", 'Transferencias y pagos', { 
... 

這裏是蹲點。 https://plnkr.co/edit/2fnYT6Oi7qzUnhW0KgRo?p=info

+0

你懂了!它像一個魅力!謝謝! – fablexis

相關問題