我有一个问题在angular.js的指令/类ng-斗篷或ng-show。
Chrome运行正常,但Firefox使用ng-cloak或ng-show导致元素闪烁。 恕我直言,这是由于将ng-cloak/ng-show转换为style="display: none;",可能Firefox javascript编译器有点慢,所以元素出现一段时间,然后隐藏?
例子:
<ul ng-show="foo != null" ng-cloak>..</ul>
我有一个问题在angular.js的指令/类ng-斗篷或ng-show。
Chrome运行正常,但Firefox使用ng-cloak或ng-show导致元素闪烁。 恕我直言,这是由于将ng-cloak/ng-show转换为style="display: none;",可能Firefox javascript编译器有点慢,所以元素出现一段时间,然后隐藏?
例子:
<ul ng-show="foo != null" ng-cloak>..</ul>
当前回答
上面列出的解决方案没有一个对我有效。然后我决定看看实际的函数,并意识到当“$scope.”Watch”被解雇了,它在name字段中放置了一个值,这并不意味着是这样的情况。在代码中,我设置oldValue和newValue
$scope.$watch('model.value', function(newValue, oldValue) {
if (newValue !== oldValue) {
validateValue(newValue);
}
});
本质上,当范围。在这种情况下,AngularJS监视name变量(model.value)的变化。
其他回答
确保AngularJS包含在HTML的头部。参见ngCloak文档:
为了得到最好的结果,angular.js脚本必须加载在头文件中 HTML文件的部分;或者,CSS规则(上面)必须是 包含在应用程序的外部样式表中。
我不能让这些方法工作,所以我最终做了以下。对于你最初想隐藏的元素:
<div <!--...--> style="display: none;" ng-style="style">
然后在你的控制器中,在顶部或顶部附近添加以下内容:
$scope.style = { display: 'block' };
这样,元素最初是隐藏的,只有当控制器代码实际运行时才显示。
您可以根据需要调整位置,也许还可以添加一些逻辑。在我的例子中,如果当前没有登录,我将切换到登录路径,并且不希望我的界面事先闪烁,因此我设置了$scope。样式后的登录检查。
我尝试了这里发布的每一个解决方案,仍然在Firefox中闪烁。
如果它有助于任何人,我通过添加style="display: none;"到主要内容div,然后使用jQuery(我已经在页面上使用它)$('#main-div-id').show();一旦从服务器获取数据后加载了所有内容;
试着关闭Firebug。我是认真的。这对我很有帮助。
应用已接受的答案,然后确保Firefox中的Firebug已关闭:按F12,然后关闭此页的Firebug -右上角的小按钮。
ngBind和ngBindTemplate是不需要CSS的替代品:
<div ng-show="foo != null" ng-cloak>{{name}}</div> <!-- requires CSS -->
<div ng-show="foo != null" ng-bind="name"></div>
<div ng-show="foo != null" ng-bind-template="name = {{name}}"></div>