javascript AngularJS 自定义指令 ng-show/ng-hide
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11741615/
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 custom directive ng-show/ng-hide
提问by Matt
Warning: Angular newbie ahead.
警告：前方有角新手。
I'm trying to create a custom widget that will show by default a "Reply" link, and when clicked, it should be hidden and a textarea should be shown. Here is what I have so far, but it doesn't work::
我正在尝试创建一个自定义小部件，默认情况下会显示一个“回复”链接，当点击它时，它应该被隐藏并应该显示一个文本区域。这是我到目前为止所拥有的，但它不起作用::
.directive('replybox', function ($rootScope) {
var linkFn = function (scope, element, attrs) {
var label = angular.element(element.children()[0]);
scope.showInput = false;
label.bind("click", textbox);
function textbox() {
scope.showInput = true;
}
};
return {
link:linkFn,
restrict:'E',
scope:{
id:'@',
label:'@',
showInput:'='
},
template:'<a ng-hide="showInput">label</a><textarea ng-show="showInput"> </textarea>',
transclude:true
};
})
Any guideline will be appreciated. Thanks!
任何指导方针将不胜感激。谢谢！
回答by pkozlowski.opensource
Matias, here is a working jsFiddle: http://jsfiddle.net/pkozlowski_opensource/Z6RzD/
Matias，这是一个正在运行的 jsFiddle：http: //jsfiddle.net/pkozlowski_opensource/Z6RzD/
There were number of things going on really, but I think that the most important one was the fact that you need to use Scope.$apply to have angular notice scope changes from 'outside of anular's world'. By default angular doesn't trigger templates re-evaluation on each and every DOM event so you need to wrap it into apply:
确实发生了很多事情，但我认为最重要的一个事实是您需要使用 Scope.$apply 来让角度通知范围从“anular 的世界之外”发生变化。默认情况下，angular 不会在每个 DOM 事件上触发模板重新评估，因此您需要将其包装为 apply：
scope.$apply('showInput = true');
More info here: http://docs.angularjs.org/api/ng.$rootScope.Scope
更多信息：http://docs.angularjs.org/api/ng.$rootScope.Scope
There are also other items worth noticing in your example:
在您的示例中还有其他值得注意的项目：
- I guess you would like to be able to pass 'label' as an attribute to your directive and then use it in your template - if so you need to use {{label}} expression
- I wasn't quite sure what would be the use for the 'id' attribute so omitted it from my fiddle
- Same for the 'showInput' - couldn't quite figure out what is the thing you are trying to get
- 我猜您希望能够将“标签”作为属性传递给您的指令，然后在您的模板中使用它 - 如果是这样，您需要使用 {{label}} 表达式
- 我不太确定“id”属性的用途是什么，所以从我的小提琴中省略了它
- 'showInput' 也一样 - 无法弄清楚你想要得到的东西是什么
回答by Olatunde Garuba
you ca also use $timeout to notify angular of your changes such as
您还可以使用 $timeout 来通知 angular 您的更改，例如
.directive('replybox', function($rootScope, $timeout) {
var linkFn = function(scope, element, attrs) {
var label = angular.element(element.children()[0]);
scope.showInput = false;
label.bind("click", textbox);
function textbox() {
$timeout(function() {
scope.showInput = true;
});
}
};
return {
link: linkFn,
restrict: 'E',
scope: {
id: '@',
label: '@',
showInput: '='
},
template: '<a ng-hide="showInput">label</a><textarea ng-show="showInput"> </textarea>',
transclude: true
};
});
