我想看看我的隐藏并在我的应用中显示所有元素的表达。
我知道我可以通过使用只返回参数的函数包装show指令来实现:
<div ng-show="catchShow(myShowExpr == 42)"></div>
但是,我想在我的应用中观看所有输入中的所有隐藏/显示,但上述情况还不够好。
虽然我需要重新评估表达式,但我也可以重载ngShow
/ ngHide
指令。
我也可以修改源代码,因为它非常简单:
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);
});
};
}];
虽然我不能使用谷歌CDN ......
有没有人能想到这样做的好方法?
答案 0 :(得分:22)
这是我提出的(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)
转换为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));
答案 1 :(得分:1)
另一种方法是$watch
ngShow
的属性 - 尽管这需要在指令中完成(如果您显示/隐藏已经自定义的指令,则非常有用)< / p>
scope.$watch attrs.ngShow, (shown) ->
if shown
# Do something if we're displaying
else
# Do something else if we're hiding