AngularJS错误时的指令

Question

我工作的一个指令的AngularJS是建立一个可加标签元素，并利用TagsInput

这里包装的jQuery插件的工作小提琴：http://jsfiddle.net/mgLss/

不知道为什么，但是当我添加该指令对我的应用程序，它工作正常，但什么都在其下方运行的角度失败，我得到这个错误信息：

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上，但不能让我的问题的任何确认，所以她的e希望Stack可以像以前那么多次一样来拯救。

Answer 1

大厦@ 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() 

你还应该包括角上次在你的小提琴（下管理资源） （并在你的代码中），那么elm自动是一个包装的jQuery元素，而不是一个包装的Angular元素，因此我们不需要在链接函数中使用$(elm)。

Answer 2

这是与你正在使用的插件有关的东西，它以一种角度不喜欢它的方式操纵dom，我没有进入源代码中你指向问题根源的地方，诚实。但这是一种解决问题的方法（一个丑陋的方法）。

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

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

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