Call function after HTML is loaded AngularJS

2019-09-11 05:24发布

问题:

Guys I have the following directive :

angular.module('blah').directive('someDirective', function () {
   return {
        scope: {
            arrayParam1: '=arrayParam1',
            arrayParam2: '=arrayParam2'
        },
        restrict: 'E',
        templateUrl: '/my/path/to/someDirective.tpl.html',
        link: function (scope, elem, attrs) { 
            //Some logic
            scope.someEvent = function(){
              //some logic
            }
            scope.$on('$viewContentLoaded', function () {
                debugger;
                scope.someEvent();
            });
        }
   };
});

Now in the HTML I have a ng-repeat over one of the arrays(arrayParam1 for example) and I am display some stuff. Now my goal as you can assume is to trigger the scope.someEvent after the HTML is completely loaded (finished with the iterations of ng-repeat).

Well when I use the $on it does not even stop on the debugger. If I change it to $watch it does stop after all the code is finished in the JS but the HTML is still not rendered and it triggers the even I want before the view is done.

Thanks in advance.

回答1:

use $timeout.

$timeout(function () {
   scope.someEvent();         
});

this will help.

or if you don't want to use $timeout what you have to do is make another directive parent to this directive and execute or trigger the function in parents link phase