成功呈现自定义指令后加载一些函数

时间:2015-07-23 13:01:23

标签: javascript jquery angularjs angularjs-directive

我有一个如下所示的指令:

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属性。

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

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

2 个答案:

答案 0 :(得分:1)

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

ds.WriteXml(@"E:\Temp.xml", XmlWriteMode.WriteSchema);

HTML:

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

答案 1 :(得分:0)

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

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