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

Question

我有一个指令，我想根据某些输入添加选择和文本区域或输入字段。例如

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

是的，您可以为此使用 compile 方法。

但是，如果你有一个有限的集合，我会选择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

        }
    }
});