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

问题描述

我学习的角度，而我试图减少一些code，它需要做一些常见的事情，比如显示错误信息，通过采用了棱角分明的指令。

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-节目在模板中：

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?

推荐答案

的问题是，你的链接功能模板已经被编译角后运行。因此，名称和错误编译过程中未设置时， 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 只着眼于它的属性在编译的，那么它的手表无论前pression在这一点上传递。因此，它永远不会看到该链接功能改变其属性。

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

的模式权衡是现在表单数据将在该指令的父的范围，所以我们需要你的模板中添加 $父引用：

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-显示值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！