如何从angular.dart组件里面调用一个jquery插件？ [英] how to call a jquery plugin from inside an angular.dart component?

问题描述

我正在学习angular.dart组件，试图创建一个将访问现有的jquery插件。我正在尝试如下：

  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 {
字符串参数
编译器编译器; 
进样器; 
范围范围; 
 
 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）; 
} 
}不幸的是，'container'似乎是空的。
} 
} 
  

$ b < ..如何使jQuery选择一个组件内的元素，即在影子dom？

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

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

但是现在包js的一些功能被移动到dart：js不知道应该做什么。

解决方案

问题似乎是一个 jQuery 问题。也许它会工作：

  var container = context.jQuery（shadowRoot.querySelector（'。 myContainer'））; 
  

关于dart：js 与 package：js （请参阅如何与dart中的js进行互动？ ）：

提供了一个更简单的Api， （因为 package：js 使用dart：mirrors 和 noSuchMethod ）。

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

I am learning about angular.dart components by trying to make one that will access an existing jquery plugin. I am trying something like the following:

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);
      }
    });
  }
}

Unfortunately, the 'container' seems to be empty... How to make jQuery select an element that is inside a component, i.e. in shadow dom?

BTW, what is the currently recomended way to import js? I have found this:

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

but now that some part of the functionality of package js being moved into dart:js, I'm not sure what one is supposed to do.

解决方案

The problem seems to be a jQuery problem. Perhaps it would work with :

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

About dart:js versus package:js (see How do you interact with js from dart?) :

package:js provides a simpler Api that comes at the cost of an increase of the js size (because package:js uses dart:mirrors and noSuchMethod).

About js namespace you can do what you want. I personnaly prefer to use a prefix to better see when interaction with Js is done. But it's a matter of taste.

这篇关于如何从angular.dart组件里面调用一个jquery插件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！