Potential overhead with $compile in AngularJS

Asked Mar 04 '15 at 14:35

Active Mar 04 '15 at 14:54

Viewed 50 times

In my app, a user triggers AngularJS to load an HTML containing Angular code from DB. After loading, Angular should compile and insert content to the div. I've used an SO answer to solve it https://stackoverflow.com/a/18157958/1392510. But it has to load seemingly big parts of page (more than 10-15 KBs) with this markup:

<div dynamic="markUp" ng-model="markUp"></div>

And here is dynamic directive:

app.directive('dynamic', function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, ele, attrs) {
            scope.$watch(attrs.dynamic, function(markUp) {
                ele.html(markUp);
                $compile(ele.contents())(scope);
            });
        }
    };
});

It seems like I am doing it wrong somewhere, because after insertion that dynamic div content duplicates the model content. Is there a more idiomatic way for doing this?

edited May 23 '17 at 12:20

Community

asked Mar 04 '15 at 14:35

Roman Dibikhin

It's going to be difficult to help without at least the directive's code... – jlowcs Mar 04 '15 at 14:46
@jlowcs updated w/ directive's code – Roman Dibikhin Mar 04 '15 at 14:55
What do you mean by "duplicate the model content"? – jlowcs Mar 04 '15 at 15:35
@jlowcs I mean that at first code fills model's content w/ `$scope.markUp = data.file;` and then directive fills it's own content w/ above code and compiles it. Is it possible to fill directive contents directly? – Roman Dibikhin Mar 04 '15 at 15:50
First, I don't see the point of having a ngmodel attribute. Are you sure that the way directives work is clear to you? – jlowcs Mar 04 '15 at 17:39
@jlowcs, you're right, I don't understand directives. It works w/o `ng-model="markUp"`. I will read docs on it. Thank you. – Roman Dibikhin Mar 04 '15 at 18:02

Potential overhead with $compile in AngularJS

0 Answers0