AngularJs |直到所有指令htmls加载成功后才显示页面

问题描述：

我在加载外部html模板（来自另一个url）的angularjs应用程序中创建了一些指令。当我导航到该页面时，整个绑定工作正常，但指令html载入没有足够快，因此它显示了一个空的空间。有什么办法，我可以要求angularjs等待外部html资源加载，然后显示页面视图。AngularJs |直到所有指令htmls加载成功后才显示页面

我已经在那里我创建了一个简单的指令，并加载外部HTML将它与动态的等待时间（查询字符串中传递的模板）

sample code

app.directive('ccDd1', function() { 
    return { 
     restrict: 'E', 
     scope: {}, 
     link: function() { 

     }, 
     templateUrl: 'http://testdirective.apphb.com/default?waittime=3' 
    }; 
});

有人可以帮助一个示例应用程序我在那。

我想你的代码在[codepen（https://codepen.io/manishrawat4u/pen/bpybem）。在加载之前，我看不到任何额外的空间。尝试在html中使用'{{vm.test}} {{vm.test}}'。 – Nitesh

答

确保您在添加脚本之前angular.min.js，我想知道为什么你的脚本即时功能，它应该是正常的脚本，因此将其删除：

(function() { 
//your js code 
// do other stuff}()); and only set your code

ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板。使用此指令可避免由html模板显示引起的不良闪烁效应。阅读：https：//docs.angularjs.org/api/ng/directive/ngCloak –

答

你可以把指令ngCloak在你的指令的父div上。这可以消除你的眨眼效果。

ngCloack documentation

AngularJs |直到所有指令htmls加载成功后才显示页面

相关推荐