3

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.

1 Answer 1

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.