Angularjs - Call Directive after ng-init function completes

Question

I am trying to call a Function in ng-init i my html file. That function makes a API call and gives the data. I assigned that data to a scope variable and pass that scope variable to directive.

Controller is hitting first. But before APIi call completes directive got hitted. So the scope variable which i am passing to controller is as undefined.

App.directive('foldertree', function () {
    return {
        restrict: 'A',
        scope: {
            'inputfromapicall': '=',
            'fileName': "="
        },
        link: function (scope, element, attrs, ngModelCtrl) {

            return $timeout(function() {               
                $('#divid').fileTree({
                    root: scope.inputfromapicall, //undefined
                    script: '/project/current/source/data/jqueryFileTree.jsp',
                    expandSpeed: 1,
                    collapseSpeed: 1,
                    multiFolder: false
                }, function (file) {
                    scope.fileName = file;                   
                    scope.$apply();
                });
            });
        }
    };
});

Above is my directive code

Sorry for posting the vague question.Hope some one help me with the fix.

you should $watch for model changes in that directive. also ng-init is not a good place for making api calls. it is better to make this call from controller. — Marian Ban
– Marian Ban, Commented Oct 30, 2014 at 16:07

ShaMoh · Accepted Answer · 2014-11-04 09:17:27Z

As MajoB mentioned in comment scope.$watch done the trick. Here is my updated directive code.

automateOnApp.directive('foldertree', ['$timeout', function($timeout){
    return {
        restrict: 'A',
        scope: {
            'inputfromapicall': '=',
            'fileName': "="
        },
        link: function (scope, element, attrs, ngModelCtrl, controller) {
            scope.fileName = '';
            return $timeout(function() {


                scope.$watch(function () {                           
                        return scope.inputfromapicall;
                }, function(newVal) {                      

                        if(!angular.isUndefined(scope.inputfromapicall)){
                            $('#divid').html('');
                            $('#divid').fileTree({
                                    root: newVal,
                                    script: '/project/current/source/data/jqueryFileTree.jsp',
                                    expandSpeed: 1,
                                    collapseSpeed: 1,
                                    multiFolder: false
                            }, function (file) {                        
                                    scope.fileName = file;                   
                                    scope.$apply();
                            });
                        }
                });

            });
        }
    };
}]);

Hope it helps someone in Future

Collectives™ on Stack Overflow

Angularjs - Call Directive after ng-init function completes

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