将指令的字符串值绑定到 ng-repeat 中的指令？答案

【问题标题】：Bind string value of directive to directive in ng-repeat?将指令的字符串值绑定到 ng-repeat 中的指令？
【发布时间】：2015-08-05 23:26:19
【问题描述】：

我可能在这里完全忽略了全局，但我想要做的是有条件地包含基于我正在绘制表单的对象的指令。示例：

$scope.formItems = [
    {type : 'text', directive: 'google-country'},
    {type : 'text', directive: 'google-city'},
]

这是一个包含大约 40 个字段的对象的非常小的细分，但是我只是希望能够将指令名称的字符串表示解析为对象中指令的值，并让它输出并运行所述指令在表格上：

<div class="fields" ng-repeat="field in formItems">
    <input type="{{field.type}}" {{field.directive}} />
</div>

这可能吗？还是我必须做一些不同的事情？

我认为问题在于它自己不评估的指令。这就是上述 ng-repeat 的评估方式：

<input type="text" {{field.directive}}>

编辑：

我现在将指令限制为一个类，并且简单地将 field.directive 标记包含在类中并且应该绑定正确吗？核电站。它评估了正确的字符串，但是该指令未绑定。然后我做了另一个测试，以确保指令通过硬编码名称来工作，并且工作正常！所以我认为指令是在评估这个范围之前绑定的？

【问题讨论】：

值得一读 - 正是你的情况onehungrymind.com/angularjs-dynamic-templates
嗨@JanisP，我已经在运行编译，我知道我的示例中根本没有提到这一点，但我正在这样做，我认为我的问题是 field.directive表达式不计算，它只是吐出标签，你知道为什么吗？
试图在 dom 中做太多...需要将其连接为指令中的字符串或为各种类型预先构建模板并在指令 js 中编译

标签： angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

{{field.directive}} 不会插入到元素属性中。它应该用作属性值或文本节点。

app.directive('directive', function ($compile) {
    return {
        restrict: 'A',
        priority: 10000,
        link: function (scope, element, attrs) {
            var oldDirective;
            attrs.$observe('directive', function (directive) {
                if (directive && element.attr(directive) === undefined) {
                    oldDirective && element.attr(oldDirective, undefined);
                    oldDirective = directive;
                    element.attr(directive, '');
                    $compile(element)(scope);
                }
            });      

        }
    };
});

例如，

<div directive="ng-show">...</div>

它可以解决问题，但看起来像 hack，可能有更合适的方法来设计表单。 'google-country' 和 'google-city' 可以是 common 指令的参数，而不是 input 指令。

所以我认为指令是在这个范围之前绑定的评价了吗？

没错，当compile 发生时，范围还没有准备好。并且您仅在 link 中获得插值属性（包括 class）值，因此应在此阶段运行 $compile 以使指令生效。

【讨论】：

这很棒，帮助我更多地了解 Angular 的作用以及它如何处理范围。

【解决方案2】：

您需要创建一个属性指令，作为参数将接收您想要的动态指令。在此指令中，您需要实现编译功能 - 在这里您将使用元素参数删除当前指令：element.removeAttr() 方法并使用 element.attr() 将动态指令添加到元素。 compile 函数可以返回 postlink 函数，你也应该实现它以便现在重新编译元素：$compile(element)(scope)。

【讨论】：