Question

我正在使用angular-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 = 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>

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

示例：

https://plnkr.co/edit/w7WbfwyYqkqxQWsAPCZz?p=preview

Answer 1

您是否正在寻找在创建新的吐司之前清除现有的祝酒词。如果是，请尝试以下

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

这是掠夺者。 https://plnkr.co/edit/2fnYT6Oi7qzUnhW0KgRo?p=info

Answer 2

您还可以设置新消息，而无需移除面包，也不必按照接受的答案中的建议添加新消息。

创建Toastr消息时，您将返回一个elmDeviceName实例。在此活动的烤面包上，您可以通过ActiveToast属性访问ToastRef实例，从那里可以访问属性toastrRef（默认情况下，componentInstance的实例）不要使用您自己的自定义组件）。您可以在此Toast实例上直接设置新消息，如下所示：

Toast

MikeAlexMartinez在the following GitHub issue inside the ngx-toastr repository中提到了该解决方案：

希望这对到此结束的其他人很有用。

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

2 个答案: