成功渲染自定义指令后加载一些函数

Question

我有一个指令如下所示：

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

我正在尝试在成功加载自定义指令后调用回调函数。

我尝试使用link 属性，如link 中所述。

甚至尝试在$scope 对象中定义一个loadcallback 函数并在自定义指令中调用它：

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

然后在html中：

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

但这没有用。我什至在控制器中尝试了以下操作，但也不起作用。

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

Answer 1

您可以从指令本身调用回调。
只需将其传递给指令的控制器即可：

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

HTML：

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

Answer 2

这可以帮助您满足您的要求。

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