Javascript 两个切换元件在屏幕上瞬时闪烁

Javascript 两个切换元件在屏幕上瞬时闪烁,javascript,jquery,html,css,angularjs,Javascript,Jquery,Html,Css,Angularjs,我有两个容器可以根据作用域属性显示文本: <style> [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{ display: none !important; } </style> <a ng-hide="show===false" ng-cloak>item 1</a> <a ng-hide="show===true" n

我有两个容器可以根据作用域属性显示文本:

<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
    display: none !important;
}
</style>
<a ng-hide="show===false" ng-cloak>item 1</a>
<a ng-hide="show===true"  ng-cloak>item 2</a>
<span ng-click="toggle()">toggle</span> 
//js
var app = angular.module('appy', []);
app.controller('ctrl', function($scope){
  $scope.show = false;
  $scope.toggle = function(){
    $scope.show = !$scope.show;
  };
});

[ng \:斗篷],[ng斗篷],[data ng斗篷],[x-ng-斗篷],.ng斗篷,.x-ng-斗篷{
显示:无!重要;
}

这个简单的例子可以在JSBIN中使用,但是在我的页面上,内容“item 1”和“item 2”都会在屏幕上瞬间闪烁。我可能会错误地执行哪些操作,从而使这两个元素简短地出现


我一直在用它作为参考。

我建议你做的第一件事是,把
ng斗篷
放在
身体上,而不是每个锚上。所以,这将有助于隐藏
角度未编译的
内容(
{{}}
),以显示在主体内部的任何位置


如果您只是想显示锚点,那么我想说的是使用
ngbind
呈现它们的内部文本,如下所示

标记

<a ng-bind="show? 'item 1' : 'item 2'" href="{{myHref(show)}}"></a>

作为一个开始,它会改进一些事情:第一个项目是
ng show=“show”
,第二个项目是
ng hide=“show”
。在实际页面上的内容之前是否加载了ngclope样式?@我想你丢失了一些文本!我不确定我是否听懂了。您已经绑定了
show
,但是我看不到您在任何地方使用它。然后您的
myHref
方法总是返回相同的字符串。@thomas我只是在演示中这样做的。。首先,您应该尝试在body元素上放置
ng-clope
。最终我并没有使用它,但它仍然是一个干净的解决方案。多谢@托马斯,我能知道你最后用了什么吗?
$scope.myHref = function(){
   if(show) 
      return 'something/someaction1' 
   else 
      return 'something/someaction2' ;
}