Javascript 如何将动态内容绑定到angular toastr？_Javascript_Angularjs_Toastr

Javascript 如何将动态内容绑定到angular toastr？

javascript angularjs

Javascript 如何将动态内容绑定到angular toastr？,javascript,angularjs,toastr,Javascript,Angularjs,Toastr,我正在使用，我想在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 = f

我正在使用，我想在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="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link data-require="angular-toastr@1.3.1" data-semver="1.3.1" rel="stylesheet" href="https://rawgit.com/Foxandxss/angular-toastr/1.3.1/dist/angular-toastr.css" />
    <script data-require="angular-toastr@1.3.1" 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>


柜台
{{ctrl.cont}}
增量

为方便起见，我制作了一个简单的脚本，上传到plunkr中：

例如：

您是否希望在创建新的祝酒词之前清除现有的祝酒词。如果是，请尝试下面的方法

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

这是普朗克。

您也可以设置新消息，而无需删除toast并按照接受答案中的建议添加新消息

创建toastr消息时，返回一个

ActiveToast

实例。在这个活动toast上，您可以通过

ToastRef

属性访问

ToastRef

实例，从那里您可以访问属性

componentInstance

（如果您不使用自己的自定义组件，默认情况下是

toast

的实例）。在这个

Toast

实例上，您可以直接设置一条新消息，如下所示：

const toast: ActiveToast = this.toastr.success('Something just happened');
const toastComponent: Toast = toast.toastRef.componentInstance;
setTimeout(
  () => toastComponent.message = 'Toast message has changed', 3000
);

MikeAlexMartinez在以下章节中提到了该解决方案：

希望它能对其他来到这里的人有用