Javascript AngularJS：指令中的 element.show() 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27240776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: element.show() in directive not working
提问by ps0604
I have a directive (see plunk) that wraps a DIV with style display:noneand after one second shows its content. I tried to make it display with element.show() and $(element).show() (including jQuery) but it never worked. The timeout works, what's wrong with this code?
我有一个指令（参见 plunk），它用样式包装一个 DIV，display:none并在一秒钟后显示其内容。我试图用 element.show() 和 $(element).show() （包括 jQuery）让它显示，但它从来没有奏效。超时有效，这段代码有什么问题？
This is the HTML:
这是 HTML：
<hideme>
Show this after one second
</hideme>
and this is the javascript:
这是javascript：
angular.module("app", []);
function MyCtrl($scope) {}
angular.module("app").directive('hideme', function($timeout) {
return {
restrict: 'E',
template: '<div style="display: none !important"></div>',
link: function(scope, element, attrs) {
$timeout(function() {
element.show();
}, 1000);
}
};
});
采纳答案by irth
Plunker: http://plnkr.co/edit/bzhCwjXdll3ibxc7qsMY?p=preview
Plunker：http://plnkr.co/edit/bzhCwjXdll3ibxc7qsMY?p=preview
Try using transclude:trueand then ng-transcludeto display the markup between custom element tags. Also, I'm not familiar with using show(), so instead set html ng-show='showEl'and define showEl = truein the timeout.
尝试使用transclude:true然后ng-transclude在自定义元素标签之间显示标记。另外，我不熟悉使用show()，所以改为设置 htmlng-show='showEl'并showEl = true在超时中定义。
angular.module("app", []);
function MyCtrl($scope) {}
angular.module("app").directive('hideme', function($timeout) {
return {
transclude: true,
restrict: 'E',
template: '<div ng-show="showEl"><div ng-transclude></div></div>',
link: function(scope, element, attrs) {
$timeout(function() {
scope.showEl = true;
}, 1000);
}
};
});
回答by Roger
The element is shown, the problem is that it does not contain anything to show. Also, to have the show function, you need to add a jQuery dependency and apply it to the correct div.
显示元素，问题是它不包含任何要显示的内容。此外，要拥有 show 功能，您需要添加一个 jQuery 依赖项并将其应用于正确的 div。
angular.module("app", []);
function MyCtrl($scope) {}
angular.module("app").directive('hideme', function($timeout) {
return {
restrict: 'E',
transclude: true,
template: '<div style="display: none;"><div ng-transclude></div></div>',
link: function(scope, element, attrs) {
$timeout(function() {
element.find("div:hidden").show();
}, 1000)
}
};
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<hideme>
Show me after one second.
</hideme>
</div>That said. I would do it this way:
那说。我会这样做：
angular.module("app", []).directive('hideme', function($timeout) {
return {
restrict: 'E',
transclude: true,
scope: true,
template: '<div ng-show="show"><div ng-transclude></div></div>',
link: function(scope, element, attrs) {
scope.show = false;
$timeout(function() {
scope.show = true;
}, 1000)
}
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<hideme>
Show me after one second.
</hideme>
</div>回答by 7stud
The template gets inserted into your custom tag, so your
<div>becomes a child of the<hideme>tag.In the link() function, the
elementargument is the<hideme>tag--not the<div>--therefore unhiding the<hideme>tag does not unhide a child<div>which has been styled withdisplay: none. In other words, if you have this:<hideme style="display: block"> <div style="display: none">Show this in three seconds.</div> </hideme>that won't display the
<div>.If you don't load jQuery before loading angularjs, then angularjs uses something it calls jqLite to wrap elements. The wrapped elements act like jQuery wrapped sets, but they have reduced functionality, e.g. show() and hide() are not provided.
该模板被插入到您的自定义标签中，因此您
<div>将成为该<hideme>标签的子代。在链接（）函数，该
element参数是<hideme>标签-而不是<div>--therefore取消隐藏的<hideme>标签不取消隐藏一个孩子<div>已经铺有display: none。换句话说，如果你有这个：<hideme style="display: block"> <div style="display: none">Show this in three seconds.</div> </hideme>那不会显示
<div>.如果在加载 angularjs 之前没有加载 jQuery，那么 angularjs 会使用它调用 jqLite 的东西来包装元素。包装元素的作用类似于 jQuery 包装集，但它们的功能有所减少，例如，不提供 show() 和 hide()。
So if you load jQuery and then load angularjs, you can do this:
所以如果你加载 jQuery 然后加载 angularjs，你可以这样做：
app.js:
应用程序.js：
var app = angular.module('myApp', []);
app.directive('hideMe', ['$timeout', function($timeout) {
var directive = {};
directive.restrict = 'E';
directive.link = function(scope, element, attrs) {
element.html(
'<div style="display:none">'
+ element.text()
+ '</div>'
);
$timeout(function() {
element.children().show();
}, 3000);
};
return directive;
}]);
index.html:
索引.html：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- For html5 (default is UTF-8) -->
<meta charaset="UTF-8">
<!-- For Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Examples</title>
<!-- Bootstrap CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- app.css -->
<link href="app.css" rel="stylesheet">
</head>
<body class="container">
<hide-me>Show this after three seconds.</hide-me>
<!-- JQuery 2.1.1 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Angular 1.3.3 -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<!-- app.js -->
<script src="app.js"></script>
</body>
</html>
However, I notice that the text flashes briefly on the page before being hidden. Edit:If I replace element.text()with element.html(), then there's no flash.
但是，我注意到文本在隐藏之前在页面上短暂闪烁。编辑：如果我替换element.text()为element.html()，则没有闪光。
On the other hand, if you don't load jQuery you can do this:
另一方面，如果你不加载 jQuery，你可以这样做：
var app = angular.module('myApp', []);
app.directive('hideMe', ['$timeout', function($timeout) {
var directive = {};
directive.restrict = 'E';
directive.link = function(scope, element, attrs) {
var hideme = element[0];
hideme.innerHTML = '<div style="display:none">' + hideme.innerHTML + '</div>';
$timeout(function() {
var div = hideme.childNodes[0];
div.style.display = "block";
}, 3000);
};
return directive;
}]);
Then the text doesn't flash on the screen before being hidden.
然后文本在隐藏之前不会在屏幕上闪烁。
回答by Gwéna?l Després
.hide() and .show() functions work only if jquery is inserted before angular in your html file.
.hide() 和 .show() 函数仅在 html 文件中的 angular 之前插入 jquery 时才起作用。
Gwenn
格温
回答by Torsten Barthel
You could easily just use the following without including jQuery to show the element:
您可以轻松地使用以下内容而不包含 jQuery 来显示元素：
element.css('display', 'block');
And corresponding to hide it:
并对应隐藏它：
element.css('display', 'none');
