Load some functions after successful render of custom directive

Question

I have a directive as shown below:

angular.module("myApp")
.directive('formProgress', function () {
    return {
        restrict: 'E',
        scope: {
            headingfirst: "@",
            headinghighlight: "@",
            values: "=",
            numwords: "=",
            customcallback: "&"
        },
        templateUrl: 'partial-htmls/toolbox/form-progress.html',
        link: function(scope, elm, attrs){
            /* this is rendering before the template is rederred */
            /* but it should render after directive has rendered right? */
            console.dir(arguments);
            commonUtilities.navigateToForm(3);
        }
    };
});

I am trying to call a callback function after successful load of the custom directive.

I tried using link property as mentioned in this link.

And even tried defining a loadcallback function in $scope object and call it in the custom directive:

$scope.loadcallback = function(){
    //Here your view content is fully loaded !!
    commonUtilities.navigateToForm($state.current.formIndex);
}

and then in html:

<form-progress customcallback="loadcallback()">
</form-progress>

But this didn't work. I even tried the following in controller which isn't working either.

$scope.$on('$viewContentLoaded', function(){
    //Here your view content is fully loaded !!
    commonUtilities.navigateToForm($state.current.formIndex);
});

Cerbrus · Accepted Answer · 2015-07-23 13:13:17Z

1

You can call the callback from the directive itself.
Just pass it to the controller of directive:

scope: {
   customcallback: "&"
},
controller: function(scope, elm, attrs){
    scope.customcallback();
}

Html:

<form-progress customcallback="loadcallback"></form-progress>

edited Jul 23, 2015 at 13:13

answered Jul 23, 2015 at 13:04

Cerbrus

73.3k19 gold badges137 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ngLover Over a year ago

use '&' instead of '='

Mr_Green Over a year ago

@ngLover I tried using & too. this still doesn't call on complete load of custom directive.

Cerbrus Over a year ago

@Mr_Green: It does call it on complete load of the directive, but that's not the same as on render.

Mr_Green Over a year ago

@Cerbrus ohh then I am actually looking to callback a function on complete render. pardon my poor english.

ngLover · Accepted Answer · 2015-07-23 13:40:44Z

This can help you to meet your requirements.

angular.module("myApp")
.directive('formProgress', function () {
    return {
        restrict: 'E',
        scope: {
            headingfirst: "@",
            headinghighlight: "@",
            values: "=",
            numwords: "=",
            customcallback: "&"
        },
        templateUrl: 'partial-htmls/toolbox/form-progress.html',
        link: function(scope, elm, attrs){
            /* this is rendering before the template is rederred */
            /* but it should render after directive has rendered right? */
            console.dir(arguments);
            commonUtilities.navigateToForm(3);
          elm.ready(function(){
            scope.customcallback();
          })
        }
    };
});

This still doesn't call the function after rendering of the custom directive. (calls before)

Collectives™ on Stack Overflow

Load some functions after successful render of custom directive

2 Answers 2

4 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Linked

Related