angular rendering not working after i use afterRender callback

Question

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.

Any particular reason why you set terminial: true? That is going to disable further evaluation of directives/expressions. — Josh
– Josh, Commented Apr 12, 2016 at 12:50
@Josh i am a newbee here. and the code is not mine. It is just extensive googling around. Let me try with false flag and see if that works :) — georoot
– georoot, Commented Apr 12, 2016 at 12:54

Josh · Accepted Answer · 2016-04-12 13:01:59Z

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()"

Collectives™ on Stack Overflow

angular rendering not working after i use afterRender callback

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related