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

【问题标题】：AngularJS error when wrapping jQuery plugin in a directive在指令中包装 jQuery 插件时出现 AngularJS 错误
【发布时间】：2013-01-04 16:33:30
【问题描述】：

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

这是一个有效的小提琴：http://jsfiddle.net/mgLss/

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

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

我在 IRC 上花了最后一个小时，但我的问题没有得到任何确认，所以希望 Stack 能够像以前那样来救援。

【问题讨论】：

标签： javascript jquery angularjs directive

【解决方案1】：

这与您正在使用的插件有关，它以角度不喜欢的方式操纵 dom，老实说，我没有进入源代码指向问题的根源.但这里有一种方法（一种丑陋的方法）来解决它。

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

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

http://jsfiddle.net/mgLss/33/

【讨论】：

谢谢！我会选择 Marks 的答案，因为它稍微优雅一些，但这基本上是一样的。

【解决方案2】：

基于@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()

您还应该在小提琴中最后包含 Angular（在管理资源下）（以及在您的一般代码中），然后 elm 自动成为包装的 jQuery 元素，而不是包装的 Angular 元素，因此我们不需要在链接函数中使用$(elm)。

【讨论】：