Javascript 在指令中包装jQuery插件时出现AngularJS错误

我正在为AngularJS编写一个指令，它构建一个可标记元素并利用

这是一把小提琴：

不知道为什么，但当我将该指令添加到我的应用程序中时，它工作正常，但它下面的任何其他操作都会失败，我收到以下错误消息：

Error: node is undefined
compositeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837
compositeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837
nodeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:4216
compositeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3834
compositeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837
compositeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837
compositeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837
nodeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:4216
compositeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3834
compositeLinkFn@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837
compile/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3746
bootstrap/</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:932
Scope.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:7808
Scope.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:7888
bootstrap/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:930
invoke@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:2788
bootstrap@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:929
angularInit@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:904
@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:14397
f.Callbacks/o@http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js:2
f.Callbacks/p.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js:2
.ready@http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js:2
B@http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js:2

错误：节点未定义
compositeLinkFn@http：//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837
compositeLinkFn@http：//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837
nodeLinkFn@http：//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:4216
compositeLinkFn@http：//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3834
compositeLinkFn@http：//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837
compositeLinkFn@http：//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837
compositeLinkFn@http：//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837
nodeLinkFn@http：//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:4216
compositeLinkFn@http：//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3834
compositeLinkFn@http：//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:3837
compile/这与您正在使用的插件有关，它以angular不喜欢的方式操纵dom，老实说，我没有深入到源代码中，让您找到问题的根源。但这里有一个方法（一个丑陋的方法）来修复它

<div ng:controller="TestCtrl">
    {{ hello }}
    <div><taggable default="changed"></taggable></div>
</div>
​


{{你好}}
​

只需将该指令包装在另一个DOM元素中，确保插件是隔离的

基于@fastreload的答案，一个稍微不那么难看的解决方案，它不需要更改HTML：

// as per @fastreload, wrap input in a div to prevent Angular from getting confused
template: "<div><input type=\"text\"></div>",
link: function(scope, elm, attrs) {
    elm.children().tagsInput({      // note children()

//按照@fastreload，将输入包装在div中，以防止Angular混淆
模板：“”，
链接：功能（范围、elm、属性）{
elm.children（）.tagsInput（{//note children（）

您还应该将Angular last包含在您的fiddle中（在manageresources下）（通常也包括在您的代码中），然后
elm
自动成为一个包装的jQuery元素，而不是包装的Angular元素，因此我们不需要使用
$（elm）
在链接功能中。
谢谢！我选择Marks answer，因为它稍微优雅一些，但基本上是一样的。