AngularJS use Directive from controller

Question

i need to use directive from controller in angular 1.6.*.

I explain better with code.

Controller

$scope.directive = [
   "<span my-directive></span>",
   "<span my-directive2></span>",
   "<span my-directive3></span>"
]

HTML

<div>{{directive}}</div>

My solution is:

Controller

directive.forEach(function (item) {
    $compile(item)($scope).appendTo('.navbar');
})

HTML

<div class="navbar"></div>

But my solution is DOM dependent, is a bad solution.
I need a smart solution.

Any ideas?

Thanks!

mmmm, there is a lot of solutions, and as i see this is not work. But the most important of all, is FOR WHAT IS THIS CODE? — Álvaro Touzón
– Álvaro Touzón, Commented Oct 24, 2017 at 13:14
Most solutions use $compile but with respect to the parent that directives are bound to — Aleksey Solovey
– Aleksey Solovey, Commented Oct 24, 2017 at 13:19

Vladimir Zdenek · Accepted Answer · 2017-10-24 15:29:29Z

1

You could create your own directive which will do this binding for you similarly to ng-bind and ng-bind-html.

Please consider the following example:

Directive

function MyBindCompileDirective($compile) {
    return {
        restrict: 'A',
        link(scope, elem, attrs) {
            attrs.$observe('myBindCompile', () => elem.html($compile(scope.myBindCompile)(scope).html()))
        }
    };
}

angular
    .module('app')
    .directive('myBindCompile', MyBindCompileDirective);

Usage in HTML

<div ng-repeat="item in directives" my-bind-compile="item"></div>

edited Oct 24, 2017 at 15:29

answered Oct 24, 2017 at 13:31

Vladimir Zdenek

2,2901 gold badge20 silver badges24 bronze badges

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

4 Comments

Daorithos Over a year ago

Thanks, is another way, but is DOM dependent too. and the scope is isolated, i can't.pass the data Example "<span my-directive3 myData='data'></span>"

Vladimir Zdenek Over a year ago

Instead of an isolated scope you could just use attr.$observe, but the example with isolated scope seemed more relatable to me. I updated the answer to use $observe instead of $watch.

Daorithos Over a year ago

Your code give me a problem, but i have understand your idea. And i understand that is impossible without $compile and html(). Thank you!

Vladimir Zdenek Over a year ago

Not sure what the problem is, but I am glad I could help.

renatotkr · Accepted Answer · 2017-10-24 13:17:50Z

0

I would iterate in a ngRepeat and put the directive directly, changing only what is needed. collection is defined in the controller

<div ng-repeat="model in collection">
 <span my-directive variable="model"></span>
</div>

answered Oct 24, 2017 at 13:17

renatotkr

684 bronze badges

Collectives™ on Stack Overflow

AngularJS use Directive from controller

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related