角指令模板缺少結束標記

我試圖創造angularjs這將產生依賴於VIE屬性通過標籤和文字HTML的幾行指令。該指令的使用看起來像這樣 -角指令模板缺少結束標記

<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

來源

2014-04-01 Abhay PS

我加入'的console.log（元）'的鏈接功能，並得到：通過打開和關閉的標籤，屬性與括號

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>

小提琴構造！'<H1>示例文本< - - {{mytag}} - >'作爲innerHtml。所以棱角分明的關閉'mytag'？ –

看起來像，註冊後打開mytag（h1）它不能接受不是h1（mytag）的結束標記。所以我認爲棱角不是匹配開放mytag和關閉mytag的表格，這就是爲什麼它忽略了mytag的結尾......我不知道在這種情況下解決方案是什麼！ –

出於安全原因，角度可能會拒絕呈現插入的結束標記。儘管你沒有使用ng-bind-html，但它仍然值得閱讀[嚴格上下文轉義]（http://docs.angularjs.org/api/ng/service/$sce）。 – miqid

絕對是一個怪異離奇的事情。出於某種原因，它不希望兩次評估mytag值，所以這裏有一個解決方法。使用鏈接功能和$編譯，你可以修復它，它的工作原理。

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

這裏是一個工作Fiddle

來源

2014-04-01 02:14:27

嗨扎克，我知道這是一個阿爾泰的方式。我試圖避免這種方法，因爲我有多行html生成，他們將有一些ng-指令。模板的方式很簡單，因爲它負責清理和編譯等。僅供參考，它會對mytag進行兩次評估。如果你只是刪除'/'，它評估得很好。只是它無法將其作爲之前打開的標籤的結束標籤。感謝您的幫助:-) –

可能過於冗長，但作品。 http://jsfiddle.net/N5FLN/1/

來源

2014-04-01 02:45:15 dannyde

角指令模板缺少結束標記

回答

相關問題