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 · Answer 1 · 2015-07-23T13:13:17.787

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 '15 at 13:13

answered Jul 23 '15 at 13:04

Cerbrus

70,800
18
132
147

use '&' instead of '=' – ngLover Jul 23 '15 at 13:12
@ngLover I tried using `&` too. this still doesn't call on complete load of custom directive. – Mr_Green Jul 23 '15 at 13:13
@Mr_Green: It _does_ call it on complete _load_ of the directive, but that's not the same as on _render_. – Cerbrus Jul 23 '15 at 13:16
@Cerbrus ohh then I am actually looking to callback a function on complete render. pardon my poor english. – Mr_Green Jul 23 '15 at 13:17

ngLover · Answer 2 · 2015-07-23T13:40:44.477

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) — Mr_Green, Jul 23 '15 at 13:38

Load some functions after successful render of custom directive

2 Answers2