angularjs: any way to use directive's nested DOM elements as the template?

Question

Please refer to code below.

I'd like to avoid using ng-trasclude, as it's extra wrapping elements, + ng-transclude make own scope. So my goal is to render <div foo title="FOO!">FOO!</div> in the end.

$compile(el.html())(scope) breaks, since again, it needs a wrapping element.

template: "<div ng-transclude></div>" will fail to acces scope.title.

Thanks

EDIT Added plunker link: https://plnkr.co/edit/R1CAc5pksOVMJoFLhsTu?p=preview And snippet

angular.module('app', []).directive('foo', function() {
    return {
        restrict: 'A',
        scope: {
            title: '@'
        }
    }
});

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
  </head>
  <body>
    <div foo title="FOO">{{title}}</div>
    <span>expecting "FOO!" above this line, but, sigh...</span>
  </body>
</html>

EDIT 2

I'd like to keep isolate scope, so that attributes (<div foo title="FOO!">{{title}}</div> are then applied via scope: {title:'@'}.

EDIT 3

Updated the snippet.

Sudharsan S · Accepted Answer · 2017-07-12 13:55:30Z

1

You assigned isolated scope for the directive. if you want access it make it as local by given scope : true.

angular.module('app', []).directive('foo', function() {
  
    return {
        restrict: 'A',
         scope: {
            title : '='
        },
        template : '{{title}}'
    }
});

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
  </head>
  <body>
    <div foo title="'Foo!'"></div>
    <span>expecting "FOO!" above this line, but, sigh...</span>
  </body>
</html>

edited Jul 12, 2017 at 13:55

answered Jul 12, 2017 at 13:13

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

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

3 Comments

Aleksandr Makov Over a year ago

Thanks, yeah that way I would need to manually assign attributes to the scope , i.g: $scope.title = $attrs.title;, while instead I could use <div foo title="FOO!">{{title}}</div> along with scope: {title: '@'}.

Aleksandr Makov Over a year ago

Updated question.

Sudharsan S Over a year ago

@AleksandrMakov - I updated the answer you just check

Ero · Accepted Answer · 2017-07-12 13:12:14Z

0

you need to have a template to render scope.foo so in your directive you need to specify a template. also if you aren't going to have any values coming from the parent you don't have to put scope: {} as a scope will be create for you already

angular.module('app', []).directive('foo', function() {
    return {
        restrict: 'A',
        template: '<span ng-bind="foo"></span>', // <-- add this line
        link: function(scope, el) {
            scope.foo = 'FOO!';
        }
    }
});

answered Jul 12, 2017 at 13:12

Ero

5301 gold badge3 silver badges15 bronze badges

Comments

Liyaquet Hussain · Accepted Answer · 2017-07-12 13:21:20Z

0

try with it

 link: function(scope, el,attr) {
            scope.$parent.foo = "foo"
            scope.foo = 'FOO!';
          }

answered Jul 12, 2017 at 13:21

Liyaquet Hussain

1015 bronze badges

1 Comment

Boiethios Over a year ago

You must provide some explanation in your answer.

Collectives™ on Stack Overflow

angularjs: any way to use directive's nested DOM elements as the template?

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related