0

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

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

不知道为什么，但是当我将该指令添加到我的应用程序时，它可以正常工作，但是在它下面运行 angular 的任何其他东西都会失败，并且我收到以下错误消息：

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 能够像以前一样多次来救援。

4

2 回答 2

1

这与您正在使用的插件有关，它以角度不喜欢它的方式操纵 dom，老实说，我没有进入源代码指向问题的根源。但这是一种修复它的方法（一种丑陋的方法）。

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

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

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

于 2013-01-04T16:47:42.170 回答
0

基于@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（在管理资源下）（以及一般在您的代码中），然后elm自动是一个包装的 jQuery 元素，而不是一个包装的 Angular 元素，因此我们不需要$(elm)在链接中使用功能。

于 2013-01-04T17:05:01.053 回答