Question

我有一个input元素，在DOM就绪时，我附加了一个jQuery插件：

<input id="classic-input" type="text">
<script type="text/javascript">
    $(document).ready(function () {
        $("#classic-input").tokenInput("http://jquery-tokeninput-demo.herokuapp.com/");
    });
</script>

这非常有效，因为我需要在我的应用程序的各个部分使用它，我创建了template.html并在其中插入了以前的代码片段，而不是我创建的：

(function() {
    'use strict';

    angular
        .module('app', [])
        .directive('myDir', myDir);

    function myDir() {
        return {
            templateUrl : "template.html"
        };
    } 
})();

当我在页面中插入此指令时，表单会显示，但是当我与它交互时没有任何反应。我很确定ready处理程序是所有邪恶的根源。我错了吗？如果我对，如何编辑此指令？

Here是一个带有示例的插件。

Answer 1

您的模板相当小，除了您可以跳过script部分 - 只需将您的代码放入指令中，如下所示：

function myDir() {
    return {
        link: function (scope, element) {
          $(element).tokenInput("http://jquery-tokeninput-demo.herokuapp.com/");
        }
    };
}

并将其应用于input标记，如下所示：

<input type="text" my-dir>

通过这种方式，您的模板中没有id硬编码，如果页面上有多个此类指令，这将成为一个问题。

查看更新的demo。

处理角度自定义指令中的onReady事件

1 个答案: