user2436745
user2436745

Reputation: 17

angularjs repeat custom directive

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?

Upvotes: 1

Views: 520

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136124

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));
}

Upvotes: 1

Related Questions