I have a UI widget in a directive and it works fine when I instantiate it
directly in HTML.
<comp-comments username="Barry Bonds" timestamp="5/24/2016 5:42:05 PM"
jscommand="javascript:void(0);" comment="Hello"></comp-comments><br/>
But, when I try to attach them dynamically in runtime, I'm not getting them
to display properly. I have it being created in a DevExpress UI widget and
thought that's where the disparity was, but, when I try to append it to a
DIV using ID, nothing happens.
var compComment = angular.element(document.createElement('comp-comment'));
compComment.attr('username', userName);
compComment.attr('timestamp', timeStamp);
compComment.attr('jscommand', jsCommand);
compComment.attr('comment', comment);
$('#commentsScrollViewID').append($compile(compComment)($scope));
Luckily, correct tag gets appended to the DIV, but, it doesn't compile to
the proper template - I tried it using compile and link options as well
with proper changes in the directive i.e. appending to element instead of
returning the markup etc..
app.directive('compComments', function ($compile) {
return {
restrict: 'AE',
replace: true,
link: function (scope, element, attrs) {
var compCommentWidget =
$('<div>').addClass('compCommentWidget');
var headerBlock =
$('<div>').appendTo(compCommentWidget).addClass('compCommentHeader');
$('<div>').appendTo(headerBlock).text(attrs.username).addClass('compCommentUserName');
$('<a>').appendTo(headerBlock).text('[Delete]').attr('href',
attrs.jscommand).addClass('compCommentDelete');
$('<div>').appendTo(headerBlock).text(attrs.timestamp).addClass('compCommentTimeStamp');
$('<div>').appendTo(compCommentWidget).addClass('compComment').dxTextArea({
readOnly: true, value: attrs.comment }).dxTextArea('instance');
compCommentWidget = $compile(compCommentWidget)(scope);
element.after(compCommentWidget);
}
};
});
Can someone shed some light on this issue please? Much appreciated...
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
