Reputation: 17
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
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