javascript 如何在指令模板中使用动态 ng-show 值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21273912/
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
How do you use dynamic ng-show values inside a directive template?
提问by egervari
I am learning angular, and I am trying to reduce some code that it takes to do some common things, like display error messages, by using angular directives.
我正在学习 angular，并且我试图通过使用 angular 指令来减少一些代码，这些代码执行一些常见的事情，比如显示错误消息。
One directive I would like to create is like this:
我想创建的一个指令是这样的：
<error-message name="paymentPlanForm.position" error="required">
This field is required.
</error-message>
This would generate the following:
这将生成以下内容：
<p ng-show="paymentPlanForm.position.$dirty && paymentPlanForm.position.$error.required">
<span class="fontawesome-remove"></span> This field is required.
</p>
I started to write a directive to accomplish this as follows:
我开始写一个指令来完成这个，如下所示：
app.directive("errorMessage", function() {
return {
restrict: 'E',
transclude: true,
replace: true,
templateUrl: 'views/partials/errorMessage.html',
link: function(scope, element, attributes) {
scope.name = attributes.name;
scope.error = attributes.error;
}
}
});
The template is as follows:
模板如下：
<p ng-show="{{name}}.$dirty && {{name}}.$error.{{error}}">
<span class="fontawesome-remove"></span>
<span ng-transclude></span>
</p>
I thought this would work, but Angular seems to crash when trying to parse ng-showinside the template:
我认为这会奏效，但是当尝试ng-show在模板中解析时 Angular 似乎崩溃了：
Error: [$parse:syntax] Syntax Error: Token '.' not a primary expression at column 1 of the expression [.$dirty && .$error.] starting at [.$dirty && .$error.].
http://errors.angularjs.org/1.2.9/$parse/syntax?p0=.&p1=not%20a%20primary%20expression&p2=1&p3=.%24dirty%20%26%26%20.%24error.&p4=.%24dirty%20%26%26%20.%24error.
minErr/<@http://localhost:8080/keiko/vendor/js/angular.js:78
When I inspect the element in Firebug, the dynamic values have been passed in successfully, but I guess there's a problem with the scope, or something else.
当我在 Firebug 中检查元素时，动态值已成功传入，但我猜是作用域有问题，或者其他问题。
How can I get angular to do what I want?
我怎样才能有角度做我想做的事？
采纳答案by KayakDave
The problem is that your link function runs after the template has been compiled by Angular. So nameand errorhaven't been set during compilation when ngShowchecks its attributes (thus the error where it see's a "." without anything in front of it).
问题是您的链接函数在 Angular 编译模板后运行。因此name，error在编译期间ngShow检查其属性时尚未设置（因此它看到的错误是“。”前面没有任何内容）。
ngShowonly looks at its attributes at compile, it then watches whatever expression was passed in at that point. So it never sees that the link function changes its attribute.
ngShow只在编译时查看它的属性，然后查看当时传入的任何表达式。所以它永远不会看到链接函数改变了它的属性。
The html has been updated by the time you look at it, which makes it all the more confusing.
html 在您查看时已更新，这使它更加混乱。
My recommendation is to use an isolate scope and pass those two attributes in that way. That'll address the timing, plus it's not a bad idea to use isolate scopes for this kind of directive anyway:
我的建议是使用隔离范围并以这种方式传递这两个属性。这将解决时间问题，而且无论如何对这种指令使用隔离范围并不是一个坏主意：
scope:{
name: '@',
error: '@'
},
The one trade off is now the form data will be on the directive's parent's scope, so we'll need to add a $parentreference within your template:
一个权衡是现在表单数据将在指令的父级范围内，因此我们需要$parent在您的模板中添加一个引用：
template: '<div><p ng-show="$parent.{{name}}.$dirty">Dirty</p><p ng-show="$parent.{{name}}.$error.{{error}}"><span ng-transclude></span></p></div>',
Note I tweaked your template to separate the dirty and the required tests just to make it easier to see it working.
请注意，我调整了您的模板以将脏测试和所需测试分开，只是为了更容易查看它的工作情况。
Here's a working fiddle
这是一个工作小提琴
