Angularjs – 隐藏内容，直到DOM加载
我在Angularjs中遇到了一个问题，在我的数据从服务器返回之前，在我的HTML中闪烁。
这里是一个video，演示了这个问题：http: //youtu.be/husTG3dMFOM – 注意＃| 和灰色地带的权利。
我已经尝试ngCloak没有成功（虽然ngCloak确实防止括号出现承诺），并想知道隐藏内容的最佳方式，直到HTML已由Angular填充。
我在我的控制器中使用了这个代码：
var caseCtrl = function($scope, $http, $routeParams) { $('#caseWrap').hide(); // hides when triggered using jQuery var id = $routeParams.caseId; $http({method: 'GET', url: '/v1/cases/' + id}). success(function(data, status, headers, config) { $scope.caseData = data; $('#caseWrap').show(); // shows using jQuery after server returns data }). error(function(data, status, headers, config) { console.log('getCase Error', arguments); }); } …但我一次又一次听到不要操纵控制器的DOM。 我的问题是我怎样才能实现这个使用指令？ 换句话说，如何隐藏指令所附的元素，直到从服务器加载所有内容为止？
在你的CSS中添加：
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
只需在这里添加一个“ ng-cloak ”属性给你的div：
<div id="template1" ng-cloak>{{scoped_var}}<div>
doc： https ： //docs.angularjs.org/api/ng/directive/ngCloak
在你的caseWrap元素上，放ng-show="contentLoaded" ，然后你现在有$('#caseWrap').show(); 把$scope.contentLoaded = true;
如果caseWrap元素在此控制器之外，则可以使用$ rootScope或events执行相同的操作。
将以下内容添加到您的CSS：
[ng\:cloak],[ng-cloak],.ng-cloak{display:none !important}
你的angular模板的编译不够快。
UPDATE
你不应该在你的控制器中进行DOM操作。 有两件事你可以做… 1.你可以通过一个指令拦截控制器范围内的值的变化！ 在你的情况下，创build一个指令作为一个属性分配你想要观看的属性。 在你的情况下，这将是caseData 。 如果casedata是虚假的，隐藏它。 否则，显示它。
- 更简单的方法是使用ngShow ='casedata'。
码
var myApp = angular.module('myApp', []); myApp.controller("caseCtrl", function ($scope, $http, $routeParams, $timeout) { $scope.caseData = null; //mimic a delay in getting the data from $http $timeout(function () { $scope.caseData = 'hey!'; }, 1000); }) .directive('showHide', function () { return { link: function (scope, element, attributes, controller) { scope.$watch(attributes.showHide, function (v) { if (v) { element.show(); } else { element.hide(); } }); } }; });
HTML
<div ng-controller='caseCtrl' show-hide='caseData'>using directive</div> <div ng-controller='caseCtrl' ng-show='caseData'>using ngShow</div>
JSFIDDLE： http : //jsfiddle.net/mac1175/zzwBS/
既然你问了一个指令，试试这个。
.directive('showOnLoad', function() { return { restrict: 'A', link: function($scope,elem,attrs) { elem.hide(); $scope.$on('show', function() { elem.show(); }); } } });
在元素中粘贴（show-on-load），并在控制器中注入$ rootScope，并在加载html时使用这个广播事件。
$rootScope.$broadcast('show');
我用Zack的回应来创build一个“加载”指令，这可能对一些人有用。
模板：
<script id="ll-loading.html" type="text/ng-template"> <div layout='column' layout-align='center center'> <md-progress-circular md-mode="indeterminate" value="" md-diameter="52"></md-progress-circular> </div> </script>
指示：
directives.directive('loading', function() { return { restrict: 'E', template: 'll-loading.html', link: function($scope,elem,attrs) { elem.show(); $scope.$on('loaded', function() { console.log("loaded: "); elem.hide(); }); } } });
这个例子在html中使用了angular-material
接受的答案不适合我。 我有一些有ng-show指令的元素，即使用ng-cloak，元素也会瞬间显示出来。 在ng-show返回false之前，ng-cloak似乎已经解决了。 将ng-hide类添加到我的元素解决了我的问题。
