Question

我有一个指令，我想根据一些输入添加一个select和一个textarea或一个输入字段。例如

app.directive('monkey', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div><select><option>1</option><textarea>{{text}}</textarea></div>'
        scope: {
            text: "="
        },
        link: function(element, attrs, scope) {

            // Add listeners etc

        }
    }
});

所以html看起来像

<monkey text="model.name" type="input"></monkey>

我希望能够查看type属性并从

更改我的模板

<div><select><option>1</option><textarea>{{text}}</textarea></div>

到

<div><select><option>1</option><input>{{text}}</input></div>

编译功能是我应该使用的吗？

Answer 1

是的，您可以使用编译方法。

但是，如果您的设置有限，我会首先选择ng-if。只是因为它让事情变得更加简单。

所以模板变成了：

<div><select><option>1</option><textarea ng-if="type == 'textarea'">{{text}}</textarea><input ng-if="type == 'input'">{{text}}</input></div>

因此，您还需要将type带入您的指令中。这是整个指令：

app.directive('monkey', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div><select><option>1</option><textarea ng-if="type == 'textarea'">{{text}}</textarea><input ng-if="type == 'input'">{{text}}</input></div>'
        scope: {
            text: "=",
            type: "@"
        },
        link: function(element, attrs, scope) {

            // Add listeners etc

        }
    }
});

编译方法是否适合在指令中动态更改模板？

1 个答案: