AngularJS

Question

这是我的HTML（除其他外）：

<button type="button" class="btn btn-primary ng-cloak" ng-click="ctrl.add(ctrl.userProfile.username)" ng-hide="ctrl.userProfile.added">Add</button>

上面的 HTML 正在扩展此 HTML 页面：

<html ng-app="UserPageApp">
    <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/bootstrapCSS/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/angular.js"></script>
    <script src="js/base.js"></script>
    <script src="js/bootstrapJS/bootstrap.min.js"></script>
    <base href="/">
    </head>

这是我的base.css（以及其他一些东西）：

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

问题是，当页面加载时，"Add" 按钮出现并在一秒钟后消失（即使 ng-hide 的计算结果为 True。注意：这就是我所说的 'flicker').如果 ng-hide 的计算结果为 True，我有没有办法完全不允许按钮显示？

编辑：当我将 class="btn btn-primary ng-cloak" 更改为 class="btn btn-primary ng-cloaks" 并将其设为我的 CSS:

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

那么就成功不显示按钮了。似乎某些 JS 在加载时删除了 ng-cloak？

编辑 2：我从按钮中删除了 ng-hide，结果发现 ng-cloak class 甚至没有添加到按钮（我在 Chromium 中使用 "inspect element" 并看到ng-cloak CSS 甚至没有被应用并且 class ng-cloak 没有出现在按钮上 las）。因此，似乎 AngularJS 出于某种原因正在删除 ng-cloak class（就像我之前提到的，当我将其更改为 .ng-cloaks 时，它工作得很好）。

Answer 1

发现错误。虽然我没有在我的 post 中提到它，但 ctrl.userProfile.added 最初并不存在（在我的 user.js 文件中，我最初只有 self.userProfile = []）。然后我做了一个获取请求并加载了 self.userProfile 然后变成了 self.userProfile = {'added': true}。所以我猜 AngularJS 正在显示按钮，因为 self.userProfile.watching 最初是未定义的。

AngularJS - Chromium 中的按钮上的 ng-cloak 不起作用（闪烁仍然存在） - 由于某种原因，ng-cloak 甚至没有添加到 CSS

AngularJS - ng-cloak on button not working (flicker still exists) in Chromium - ng-cloak doesn't even get added to the CSS for some reason

javascript

css

ng-hide

ngcloak