如何将动态内容绑定到角烤面包上？
如何将动态内容绑定到角烤面包上？
提问于 2016-02-11 22:02:49
我正在使用角烤面包，我希望在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中：
示例：
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-02-11 22:20:27
在创建新的祝酒词之前，您是否正在寻找清理现有的祝酒词。如果是，那就试试下面的方法
toastr.clear();
toastr.info(vm.cont + " en espera", 'Transferencias y pagos', {
...Stack Overflow用户
发布于 2020-05-28 12:08:05
您还可以设置新消息，而不需要删除祝酒词，并按照接受的答案中的建议添加一个新消息。
在创建toastr消息时，将返回一个ActiveToast实例。在这个活动的toast中，您可以通过ToastRef属性访问toastrRef实例，从那里可以访问属性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在下面是repository存储库中的GitHub问题中提到了这个解决方案：
希望它对其他人在这里结束会有帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35350944
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号