Javascript 如何正确使用ng斗篷指令？_Javascript_Angularjs_Angularjs Directive_Ngcloak

Javascript 如何正确使用ng斗篷指令？

javascript angularjs

Javascript 如何正确使用ng斗篷指令？,javascript,angularjs,angularjs-directive,ngcloak,Javascript,Angularjs,Angularjs Directive,Ngcloak,不知何故，AngularJS中的ng斗篷不起作用。我想在加载页面时隐藏{{}。因为它看起来很糟糕 <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Angular Sample</title> </head> <body ng-model="isS

不知何故，AngularJS中的ng斗篷不起作用。我想在加载页面时隐藏{{}。因为它看起来很糟糕

<!DOCTYPE html>
<html lang="en" ng-app>
    <head>
        <meta charset="UTF-8">
        <title>Angular Sample</title>
    </head>
    <body ng-model="isShow" ng-init="isShow=true">

        <p ng-show="isShow"><span ng-cloak>{{ isShow }}</span></p>
        <p ng-show="!isShow"><span ng-cloak>{{ isShow }}</span></p>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </body>
</html>


角样
{{isShow}
{{isShow}

在css文件中添加以下内容：-

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

发件人：

为了获得最佳结果，必须在html文档的head部分加载

angular.js

脚本；或者，上面的css规则必须包含在应用程序的外部样式表中

从angular 1.3开始，必须为ng app属性指定名称，才能使其工作

<html lang="en" ng-app="myApp">

这将使引导有角度

但是对于当前的情况，当您在页面底部加载angular时，加载需要时间。因此，

ng斗篷

所需的css还不可用

将

js

移动到标记中，或者将特定的CSS代码加载到CSS中以使其工作

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

您必须在CSS中指定以下规则：

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

从中添加此css

并在父div或定义应用程序的任何位置使用类名或属性

例如：

我的解决方案我想我尝试了以上所有的建议，但都没有效果。有些用法包括ng，但它似乎有点太多了，而且创建的内部范围可能会让人害怕。因此，它尝试使用style和ng样式。在我受影响的主要部门

<div class="container" style="display:hidden;" ng-style="loaded">

然后我设置了在我的基本控制器中加载的scope变量

$scope.loaded ={display:'block'}; $scope.loaded={display:'block'}；

还有那些{{}}。奇怪的是，仅当angularjs加载后，display设置为block。然后我注意到firefox f12开发者控制台正在运行。它在做事情。愚蠢的我
使用ngBind也应该消除这一点（我有时在SharePoint中开发，Ngbeat不起作用）
AngularJS文件：
如果浏览器会在其原始状态下即时显示模板在Angular编译之前。由于ngBind是一个元素属性，因此在加载页面时，使绑定对用户不可见
这个问题的另一个解决方案是使用NG斗篷指令
JS:
HTML:

使用此处推荐的修复程序对我很有效

CSS:
JS:
HTML:

我已经尝试了上面所有的答案，还有很多其他的答案，没有任何帮助。我的（大）页面在每次加载时都会闪烁。我的解决方案是在body标签后面添加以下内容：

<div style="display:flex" opacity=0> <status-progress></status-progress> <h3>Loading... </h3> </div>
要使页面看起来“更平滑”，样式表：

.loaded{ transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; }

这样，当一切都准备就绪时，您将看到1秒的“加载”
在我的例子中，我认为我的问题是由于挂起的ajax请求。Ng斗篷可能适用于静态内容，但如果模板依赖于ajax数据，则会在接收ajax响应之前呈现该数据
为了避免这种情况，我定义了一个指令：
安古
使用一点CSS：

[ajax-cloak], [data-ajax-cloak], [x-ajax-cloak], .ajax-cloak { display: none !important; }
然后在主HTML文件中：

<div ui-view data-ajax-cloak></div>

注意：这不像ng斗篷那么复杂，因为这是一个全局克隆，它会隐藏所有内容，直到所有请求都完成。
因为这些答案都没有给出我想要的结果，我通过创建一个非常类似于
ng-clope
的指令完成了我想要的，但将代码包装在
$timeout
中，以便它将等待到
$digest
周期结束时删除掩蔽属性和/或类。这是我能够在浏览器中真正隐藏
{{}
绑定的唯一方法

angular.directive('myCloak', function($timeout) { return { restrict: 'A', compile: function (element, attr) { $timeout(function () { attr.$set('myCloak', undefined); element.removeClass('my-cloak'); }); } }; });
别忘了，您必须为这个新属性/类添加自定义css规则：

[my\:cloak], [my-cloak], [data-my-cloak], [x-my-cloak], .my-cloak, .x-my-cloak { display: none !important; }

当ng斗篷不可用时使用ngBind

<p ng-show="!isShow" ng-bind="isShow"></p>

您没有指定ng app a名称这是如何解析表达式的？这是ng init被错误使用的另一个地方；ng init指令不是通用的初始值设定项，尽管它的名称是。就像@AR7所说的，您需要为它添加一些css。我不建议将angular.js放在head部分。OP没有为
ng app
指令设置任何名称并使用angular 1.3+。希望这就是我想要的work@mohamedrias可能是可能的，但他没有使用ng控制器或任何与模块相关的东西，所以我想在这种特殊情况下不会产生问题：）这是我在ng斗篷因任何原因不可用时使用的方法。我希望所有关于ng斗篷的答案都是这样：）工作正常，但可以你能详细介绍一下这些css吗？它到底在做什么？@Cemre it将
display:none
属性添加到ng-clope类和指令的所有变体中。这个类将在你的应用程序加载期间处于活动状态，因此这个css确保不显示这个类的元素。（从@GregL的doc链接），更多地了解原因：OP代码的问题是代码在页面加载结束时加载angular.min.js，所以HTML（angular模板）在定义ng斗篷之前呈现。在这里添加css规则引用只需在页面加载时立即（在加载angular.min.js之前）在中定义angular自己的ng-Clope样式，即使在HTML结束之前不加载angular。Doc建议加载angular.js以避免/最小化此问题。
div(class="my-cloak")

<div style="display:flex" opacity=0> <status-progress></status-progress> <h3>Loading... </h3> </div>

<div class="loaded" style="opacity: 0" opacity=1> ... </div>

app.directive('opacity', opacity); function opacity($timeout) { return { link: function (scope, element, attrs) { var value = attrs.opacity; $timeout(function () { element[0].style.opacity = value; },500); } } }

.loaded{ transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; }

mymodule .directive("ajaxCloak", ['$interval', '$http', function ($interval, $http) { return { restrict: 'A', link: function (scope, element, attrs) { let stop = $interval(() => { if ($http.pendingRequests.length === 0) { $interval.cancel(stop); attrs.$set("ajaxCloak", undefined); element.removeClass("ajax-cloak"); } }, 100); } }; }]);

[ajax-cloak], [data-ajax-cloak], [x-ajax-cloak], .ajax-cloak { display: none !important; }

<div ui-view data-ajax-cloak></div>

angular.directive('myCloak', function($timeout) { return { restrict: 'A', compile: function (element, attr) { $timeout(function () { attr.$set('myCloak', undefined); element.removeClass('my-cloak'); }); } }; });

[my\:cloak], [my-cloak], [data-my-cloak], [x-my-cloak], .my-cloak, .x-my-cloak { display: none !important; }

<p ng-show="!isShow" ng-bind="isShow"></p>