Question

我正在尝试在angularjs中创建一个指令，它将生成几行html，具体取决于在vie属性中传递的标记和文本。指令用法如下所示 -

<div class="wrapper">
    <my-field my-text="sample text" my-tag="h1"></my-field>
</div>

我的指示是这样的 -

.directive('myField', function(){
    return {
        restrict: 'E',
        replace : false,
        scope : {
            myText : '@',
            myTag : '@',
        },
        template : '<{{myTag}}> {{myText}} </{{myTag}}>',
    }
})

我得到的结果是这样的 -

<div class="wrapper">
    <h1> sample text
</div>

缺少结束</h1>。我一直在努力工作几个小时，但无法修复它。

以下是Jsfiddle link

Answer 1

绝对是一个奇怪的古怪事物。由于某种原因，它不想两次评估mytag值，所以这是一种解决它的方法。使用链接函数和$ compile，您可以修复它并按预期工作。

link: function(scope, elem) {
    var tag = scope.mytag;
    var newelem = angular.element("<"+tag+"> {{mytext}}</ "+tag+">");
    var compiled = $compile(newelem)(scope);
    elem.append(compiled);
}

这是一个有效的Fiddle

Answer 2

可能过于冗长，但仍有效。将打开和关闭标记作为用括号

构造的属性传递

angular.module('myApp', [])
.directive('myField', function(){
 return {
    restrict: 'E',
    replace : false,
    scope : {
        myText : '@',
        openTag : '@',
        closeTag: '@'
    },
    template : '{{openTag}} {{myText}} {{closeTag}}',
 }
})


<div class="wrapper">
  <my-field my-text="sample text" open-tag="<h1>" close-tag="</h1>"></my-field>
</div>

小提琴：http://jsfiddle.net/N5FLN/1/

Angular指令模板缺少结束标记

2 个答案: