Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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.

share|improve this question

1 Answer 1

up vote 2 down vote accepted

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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