3

我正在通过尝试制作一个可以访问现有 jquery 插件的组件来了解 angular.dart 组件。我正在尝试以下内容：

library mylib;

import 'dart:html'; // querySelector
import 'package:js/js.dart'; // javascript 
import 'package:angular/angular.dart';

@NgComponent(
    selector: 'aSelector',
    templateUrl: 'partial.html',
    cssUrl: 'style.css',
    publishAs: 'ctrl',
    map: const {
      'param': '=>param'
    }
)
class myComponent extends NgShadowRootAware {
  String param;
  Compiler compiler;
  Injector injector;
  Scope scope;

  MyComponent(this.compiler, this.injector, this.scope);

  void onShadowRoot(ShadowRoot shadowRoot) {
    this.scope.$watch((int) => shadowRoot.querySelector('.myContainer').text.length, (currentValue, previousValue, Scope scope) {
      if (currentValue != previousValue) {
        var container = context.jQuery('.myContainer', shadowRoot);
        var options = map({
          'p1': 1,
          'p2': 2
        });
        container.jqplugin(options);
      }
    });
  }
}

不幸的是，“容器”似乎是空的……如何让 jQuery 选择组件内部的元素，即在 shadow dom 中？

BTW，目前推荐的导入js的方式是什么？我发现了这个：

import 'package:js/js.dart' as js;

但是现在包 js 的某些功能被移到 dart:js 中，我不确定应该做什么。

4

1 回答 1

2

这个问题似乎是一个jQuery问题。也许它适用于：

var container = context.jQuery(shadowRoot.querySelector('.myContainer'));

关于dart:js与package:js（请参阅How do you interact with js from dart?）：

package:js提供了一个更简单的 Api，但代价是增加了 js 的大小（因为package:js使用dart:mirrors和noSuchMethod）。

关于js命名空间，你可以做你想做的事。我个人更喜欢使用前缀来更好地查看与 Js 的交互何时完成。但这是一个品味问题。

于 2013-12-20T07:35:54.627 回答