如何在指令模板中使用动态 ng-show 值? [英] How do you use dynamic ng-show values inside a directive template?

问题描述

我正在学习 angular，并且我正在尝试通过使用 angular 指令来减少执行一些常见操作(例如显示错误消息)所需的一些代码.

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.

我想创建的一个指令是这样的:

One directive I would like to create is like this:

<error-message name="paymentPlanForm.position" error="required">
    This field is required.
</error-message>

这将生成以下内容:

<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;
        }
    }
});

模板如下:

<p ng-show="{{name}}.$dirty && {{name}}.$error.{{error}}">
    <span class="fontawesome-remove"></span>
    <span ng-transclude></span>
</p>

我认为这会起作用，但是当尝试解析模板中的 ng-show 时，Angular 似乎崩溃了:

I thought this would work, but Angular seems to crash when trying to parse ng-show inside the template:

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

当我在 Firebug 中检查元素时，动态值已成功传入，但我猜是作用域有问题，或者其他原因.

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.

我怎样才能有角度地做我想做的事?

How can I get angular to do what I want?

推荐答案

问题是你的链接函数在模板被 Angular 编译后运行.所以 name 和 error 在编译过程中没有被设置，当 ngShow 检查它的属性时(因此它看到的错误是一个没有任何东西的."在它前面).

The problem is that your link function runs after the template has been compiled by Angular. So name and error haven't been set during compilation when ngShow checks its attributes (thus the error where it see's a "." without anything in front of it).

ngShow 只在编译时查看它的属性，然后它会观察此时传入的任何表达式.所以它永远不会看到链接函数改变了它的属性.

ngShow only 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.

当你看到它时，html 已经更新了，这让它变得更加混乱.

The html has been updated by the time you look at it, which makes it all the more confusing.

我的建议是使用隔离范围并以这种方式传递这两个属性.这将解决时间问题，而且无论如何对这种指令使用隔离范围也不是一个坏主意:

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: '@'
     },

权衡现在表单数据将在指令的父级范围内，因此我们需要在您的模板中添加一个 $parent 引用:

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 $parent reference within your template:

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.

这是一个有用的小提琴

这篇关于如何在指令模板中使用动态 ng-show 值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！