CODEWITHSUNDEEP
javascriptangularjs
georoot
georoot

Reputation: 3617

angular rendering not working after i use afterRender callback

Here is the current code that i am using

App.directive('afterRender', ['$timeout', function ($timeout) {
    var def = {
        restrict: 'A',
        terminal: true,
        transclude: false,
        link: function (scope, element, attrs) {
            $timeout(scope.$eval(attrs.afterRender), 0);
        }
    };
    return def;
}]);

and i call it like

after-render="disableFullPage"

Now the problem that i am facing with the current code is that disableFullPage function is being called fine. But angular is not rendering any data. So if i put

{{message}}

that is not being rendered. Also if i remove the after-render, the rendering works fine. Can someone please help me out with what i am doing wrong, also if possible please edit the code above and provide a brief description for my better understanding as i am relatively new to angular.

Upvotes: 2

Views: 287

Answers (1)

Josh
Josh

Reputation: 44916

I see two things going on here.

First, you are setting terminal: true which is going to prevent further interpretation of directives and expressions.

According to the docs:

If set to true then the current priority will be the last set of directives which will execute (any directives at the current priority will still execute as the order of execution on same priority is undefined). Note that expressions and other directives used in the directive's template will also be excluded from execution.

Second, $parse is going to evaluate whatever expression you give it in the context of the current scope. It's like you had just written a line of javascript.

In your example above, after-render="disableFullPage", assuming disableFullPage is a function, then nothing is going to happen. You need to add the parenthesis like you were calling the function normally:

after-render="disableFullPage()"

Upvotes: 1

Related Questions