Angularjs: is it possible to use nested dom as component's template?

Question

I'm looking for a way to use existing dome nodes of component as it's template. transclusion is the closest I what I ended up with, but it still requires additional wrapping elemwe

app.component('widgetDom', {
    controller: function ($scope) {
    $scope.data = "I'm data for nested dom elements";
  }
});

And then display it as

<widget-dom>{{data}}</widget-dom>

But it won't work.

With transclusion I would end up with:

<widget-dom><div ng-transclude>{{data}}</div></widget-dom>

Is there a way to just use nested DOM elements as template for component/directive?

Thank you.

https://jsfiddle.net/yb9dzkyv/

You can only use template or templateUrl. If you want to use parentScope data you can send it with binding. — hurricane
– hurricane, Commented Nov 8, 2017 at 13:40
Not without a hack. Nested DOM can be retrieved in directive compile function and compiled with $compile against current scope. Components aren't supposed to work that way, and if you care about further upgrade to Angular 2+, it will certainly have problems with such approach. — Estus Flask
– Estus Flask, Commented Nov 8, 2017 at 13:46

Nikolaj Dam Larsen · Accepted Answer · 2017-11-08 14:01:36Z

1

This is caused by components always having an isolated scope from it's parent. If you define your "component" as a directive instead, you can configure the directive to share the scope of the parent, thus making this possible.

Like such:

app.directive('widgetDom', function(){
  return {
    restrict: 'E',
    template: '<div>Hello, {{data}}!</div>'
  };
});

Here's a plunker showing it working

answered Nov 8, 2017 at 14:01

Nikolaj Dam Larsen

5,7246 gold badges37 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs: is it possible to use nested dom as component's template?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related