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/