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

Question

I'm working on a directive for AngularJS that builds a taggable element and utilizes TagsInput

Here's a working fiddle: http://jsfiddle.net/mgLss/

Not sure why but when I add that directive to my application IT works fine, but anything else below it running angular fails and I get this error message:

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

I've spent the last hour on IRC but cant get any acknowledgment of my question so here's hoping Stack will come to the rescue as it has so many times before.

Answer 1

This is something related to the plugin you are using, it manipulates the dom in a way angular does not like it, I didn't to go into the source code the point you to the root of the issue, to be honest. But here is a way (an ugly one) to fix it.

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

Just wrap that directive within another DOM element, making sure the plugin is isolated.

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

Answer 2

Building on @fastreload's answer, a slightly less ugly solution, which does not require changing your 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()

You should also include Angular last in your fiddle (under Manage Resources) (and in your code in general), then elm is automatically a wrapped jQuery element, rather than a wrapped Angular element, and hence we don't need to use $(elm) in the link function.