Question

我可能完全忽略了这里的大局，但我正在尝试做的，有条件地包含基于我正在绘制我的表格的对象的指令。例如：

$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标记并且应该绑定到正确的？ NUP。它评估了正确的字符串，但指令没有绑定。然后我做了另一个测试，以确保该指令通过硬编码名称工作，并且工作正常！所以我认为在评估这个范围之前绑定了指令？

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

它可以解决问题，但看起来像黑客，可能有更合适的方法来设计表单。＆＃39;谷歌的国家＆＃39;和＃google-city＆＃39;可以是公共指令的参数而不是input指令。

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

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

Answer 2

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

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

2 个答案: