CODEWITHSUNDEEP
javascriptjqueryangularjsangularjs-directive
Mr_Green
Mr_Green

Reputation: 41832

Load some functions after successful render of custom directive

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);
});

Upvotes: 1

Views: 92

Answers (2)

ngLover
ngLover

Reputation: 4578

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();
          })
        }
    };
});

Upvotes: 0

Cerbrus
Cerbrus

Reputation: 72837

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>

Upvotes: 1

Related Questions