AngularJS错误当指令包装jQuery插件 [英] AngularJS error when wrapping jQuery plugin in a directive

问题描述

我正在为一个AngularJS指令，建立一个taggable元素，并利用 TagsInput

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

下面是一个工作小提琴： http://jsfiddle.net/mgLss/

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

我花了在IRC上的最后一个小时，但不能让我的问题中的任何确认所以这里的希望堆栈会出手相救，因为之前有很多次。

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.

推荐答案

在@ fastreload的回答，一个稍微不那么丑陋的解决方案，不需要改变你的HTML楼：

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()

您还应该包括角上次在你的提琴（下管理资源）（和一般的code），那么榆树自动成为包装jQuery的元素，而不是包裹角元素，因此我们并不需要在链接功能使用 $（榆树）。

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.

这篇关于AngularJS错误当指令包装jQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！