Share this question

Welcome to Teachnovice Q&A, where you can ask questions and receive answers from other members of the community.

This is a collaboratively edited question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

Creating an angular dart component dynamically?

0 like 0 dislike

I'm trying to create an angular dart component dynamically. I know it's not a best practice but I have to because of how my angular widgets are being inserted.

I based my work off of:

How to add a component programatically in Angular.Dart?

The code samples on longer work because of changes in the Angular Dart library.

I got this code to work but it's inconsistent. The solution was the to fire the scope.apply. The problem with that is:

  1. It stinks to make a call like that and would perform terribly with lots of components
  2. It seems to work randomly. Most of the time it does but occasionally it doesn't do the {{foo}} replacements
void main() {
  IBMModule module = new IBMModule();
  AngularModule angularModule = new AngularModule();

  Injector injector = applicationFactory()

  AppComponent appComponent = injector.get(AppComponent);
  appComponent.addElement("<brazos-input-string label='test'/>");

class MyValidator implements NodeValidator {

  bool allowsElement(Element element) {
    return true;

  bool allowsAttribute(Element element, String attributeName, String value) {
    return true;


class AppComponent {
  NodeValidator validator;
  Compiler _compiler;
  DirectiveInjector _directiveInjector;
  DirectiveMap _directiveMap;
  NodeTreeSanitizer _nodeTreeSanitizer;
  Injector _appInjector;
  Scope _scope;

  AppComponent(this._directiveInjector, this._compiler, this._directiveMap, this._nodeTreeSanitizer, this._appInjector, this._scope) {
    validator = new MyValidator();
asked Jan 24, 2015 by user1637302  
I re-wrote it to implement ScopeAware and that didn't do it. In fact set scope was never called ;(
ons Did you upgrade to Angular 1.0?
I got this to work. See the code changes in the edits above. It's still not right in my view, but it's much closer.
Your code has still implements ScopeAware but also this._scope as a constructor argument. I'm pretty sure ScopeAware and set scope(scope); is the way to go in 1.0. You could implement AttachAware and check if addComponent is executed before or after attach and if it is execute addComponent in attach.
That was cut and paste error. Removing scope from the constructor but still implementing ScopeAware does not call set on scope. I'll put in the corrected version.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.