javascript - 如何在指令模板中使用动态 ng-show 值？

Question

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

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

<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>

我开始写一个指令来完成这个，如下所示:

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>

我认为这可行，但 Angular 在尝试解析模板内的 ng-show 时似乎崩溃了:

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 中检查元素时，动态值已成功传递，但我猜测范围有问题，或者其他原因。

我怎样才能获得 Angular 来做我想做的事？

Answer 1

问题是您的链接函数在 Angular 编译模板后运行。所以 name 和 error 在 ngShow 检查它的属性时没有在编译期间设置(因此它看到的错误是一个“。”没有任何东西在它前面)。

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

当您查看它时，html 已更新，这使它更加困惑。

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

scope:{
        name: '@',
        error: '@'
     },

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

template: '<div><p ng-show="$parent.{{name}}.$dirty">Dirty</p><p ng-show="$parent.{{name}}.$error.{{error}}"><span ng-transclude></span></p></div>',

请注意，我调整了您的模板以将脏测试和必需测试分开，以便更容易看到它的工作情况。

这是 a working fiddle