异步加载导致tagsinput插件出现问题

asynchronous loading causes issue with tagsinput plugin

本文关键字:问题 插件 tagsinput 加载 异步      更新时间:2023-09-26

我使用bootstrap tagsinput插件与angularJS

要激活tagsinput机械,只需添加一些data-role属性

<input type="text" placeholder="add a tag" data-role="tagsinput">

,它动态生成一些HTML代码。这很有效。当我把这个输入换行到

中时
<ul>
    <li ng-repeat="todo in todos">
        <input type="text" placeholder="add a tag" data-role="tagsinput">

代码的AngularJS部分运行良好。但是当我这样包装输入时,tagsinput插件不再工作了。经过一些测试,我确信这个问题与从服务器获取todos时渲染页面有关。这种异步加载肯定是问题所在,因为当页面加载时,当我用数据滚动的input创建一些新的todo时,后者工作得很好。那么我该如何处理这个负载。

假设您用class="myClass"标记输入,然后执行以下操作

delete data-role="tagsinput"来获得一些简单的

<input type="text" placeholder="add a tag">

然后在你的angular代码中使用

$(document).find(".myClass").each(
              function(){$(this).tagsinput({});}
          );

这个应该可以完成工作