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

AngularJS error when wrapping jQuery plugin in a directive

本文关键字：插件 出错 jQuery 包装 指令 AngularJS      更新时间：2023-09-26

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

这是一个工作小提琴: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上，但没有得到任何回复，所以希望Stack能来拯救我，就像它以前很多次一样。

这与你正在使用的插件有关，它以一种angular不喜欢的方式操纵dom，我没有进入源代码点你到问题的根源，说实话。但是这里有一个方法(一个丑陋的方法)来修复它。

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

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

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

基于@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放在最后(在Manage Resources下)(通常在你的代码中)，然后elm自动成为一个被包装的jQuery元素，而不是一个被包装的Angular元素，因此我们不需要在link函数中使用$(elm)。

相关文章：