angularjs repeat custom directive

Question

i want to output custom directives from a custom directive in a ng-repeat for drag&drop purposes. my problem is that the myWidget outputs the html-tag correctly but the custom directive isn't executed.

similar to this post: ng-repeat in combination with custom directive

main directive template:

<div class="col-lg-5 hidden-md main-column" style="height:inherit;"
         ng-model='list2'
         data-drop="true"
         data-jqyoui-options="{accept:'div:not([ng-model=list2])'}"
         jqyoui-droppable="{multiple:true}">

        <div ng-repeat="item in list2"
             ng-model="list2"
             data-drag="{{item.drag}}"
             data-jqyoui-options="{revert: 'invalid'}"
             jqyoui-draggable="{index: {{$index}},animate:true}">
                <div my-widget="item.widget"></div>
        </div>

directive for dynamic call:

(function(){
"use strict";

angular
    .module('achilles')
    .directive('myWidget', function () {
        return {
            scope: {
                w: '=myWidget'
            },
            restrict: 'EA',
            priority: 300,
            link: function(scope, element, attrs) {
                element.replaceWith('<' + scope.w + '>');
            }
        };
    });})();

the inspector shows that the output is but the directive is not triggered.

(function(){
"use strict";

angular
    .module('achilles')
    .directive('anamnesisWidget', anamnesisWidget);

is there some kind of priority or scope problem that causes the 3. directive to not trigger?

output is: <anamnesis-widget></anamnesis-widget>

user2436745
– user2436745

2015-09-10 18:31:47 +00:00
Commented Sep 10, 2015 at 18:31 — user2436745
– user2436745, Commented Sep 10, 2015 at 18:31

Pankaj Parkar · Accepted Answer · 2015-09-10 18:37:04Z

1

You need to compile that directive element using $compile before replacing it, so that the underlying directive will get called and it will renders it element.

Code

link: function(scope, element, attrs) {
    element.replaceWith($compile('<' + scope.w + '/>')(scope));
}

answered Sep 10, 2015 at 18:37

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

user2436745 Over a year ago

i had to inject $compile and then it worked. why do i need (scope) after $compile?

Pankaj Parkar Over a year ago

@user2436745 I didn't mention the $compile part in your code..Its common thing in Angular do inject services before using them.. $scope tells angular that do convert(compile) the element in angular context which will have this scope available on it..

Collectives™ on Stack Overflow

angularjs repeat custom directive

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related