javascript Angular - ng-hide 和 ng-show 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16393527/
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
Angular - Event for ng-hide and ng-show
提问by jpillora
I'd like to watch my hide and show expressions on all elements in my app.
我想在我的应用程序中的所有元素上观看我的隐藏和显示表达式。
I know I can do it by wrapping the show directive with a function which just returns the argument:
我知道我可以通过用一个只返回参数的函数包装 show 指令来做到这一点：
<div ng-show="catchShow(myShowExpr == 42)"></div>
However, I'd like to watch all hide/shows across all inputs in my app and the above isn't good enough.
但是，我想在我的应用程序中查看所有输入中的所有隐藏/显示，但以上内容还不够好。
I could also overload the ngShow/ ngHidedirectives though I'd need to reevaluate the expression.
我也可以重载ngShow/ngHide指令，但我需要重新评估表达式。
I could also just modify the source since it's quite simple:
我也可以修改源代码，因为它很简单：
var ngShowDirective = ['$animator', function($animator) {
return function(scope, element, attr) {
var animate = $animator(scope, attr);
scope.$watch(attr.ngShow, function ngShowWatchAction(value) {
var fn = toBoolean(value) ? 'show' : 'hide';
animate[fn](element);
//I could add this:
element.trigger(fn);
});
};
}];
Though then I couldn't use the Google CDN...
虽然那时我无法使用 Google CDN ...
Is there a nicer way anyone can think of to do this ?
有没有更好的方法有人能想到做到这一点？
回答by jpillora
Here's what I've come up with (CoffeeScript)
这是我想出的（CoffeeScript）
getDirective = (isHide) ->
['$animator', ($animator) ->
(scope, element, attr) ->
animate = $animator(scope, attr)
last = null
scope.$watch attr.oaShow, (value) ->
value = not value if isHide
action = if value then "show" else "hide"
if action isnt last
scope.$emit 'elementVisibility', { element, action }
animate[action] element
last = action
]
App.directive 'oaShow', getDirective(false)
App.directive 'oaHide', getDirective(true)
Converted to JavaScript:
转换为 JavaScript：
var getDirective = function(isHide) {
return ['$animator', function($animator) {
//linker function
return function(scope, element, attr) {
var animate, last;
animate = $animator(scope, attr);
last = null;
return scope.$watch(attr.oaShow, function(value) {
var action;
if (isHide)
value = !value;
action = value ? "show" : "hide";
if (action !== last) {
scope.$emit('elementVisibility', {
element: element,
action: action
});
animate[action](element);
}
return last = action;
});
};
}];
};
App.directive('oaShow', getDirective(false));
App.directive('oaHide', getDirective(true));
回答by Roi
Another way to approach is to $watchthe attribute of ngShow- although this would need to be done within a directive (useful if you're show/hiding an already custom directive)
另一种方法是使用$watch的属性ngShow- 尽管这需要在指令中完成（如果您要显示/隐藏已经自定义的指令，则很有用）
scope.$watch attrs.ngShow, (shown) ->
if shown
# Do something if we're displaying
else
# Do something else if we're hiding
