2013-08-23 74 views
6

我目前有一個underscore.js模板,我還想使用angular並仍然可以使用下劃線。我想知道是否有可能使用指令來改變插值的開始和結束符號的特定範圍,就像這樣:Angularjs使用自定義插值符號作爲範圍

angular.directive('underscoreTemplate', function ($parse, $compile, $interpolateProvider, $interpolate) { 
    return { 
     restrict: "E", 
     replace: false, 
     link: function (scope, element, attrs) { 
      $interpolateProvider.startSymbol("<%=").endSymbol("%>"); 
      var parsedExp = $interpolate(element.html()); 
      // Then replace element contents with interpolated contents 
     } 
    } 
}) 

但這吐出來的是錯誤

Error: Unknown provider: $interpolateProviderProvider <- $interpolateProvider <- underscoreTemplateDirective

$interpolateProvider僅適用於模塊配置?更好的解決方案是簡單地使用字符串替換來更改<%={{%>}}

另外,我注意到,element.html()轉義%><%=<>。有沒有辦法來防止這種自動轉義?

回答

2

好的,你在這裏有幾個問題,但我找到了你的解決方案

演示

http://jsfiddle.net/colllin/zxwf2/

問題1

<>字符被轉換爲&lt;&gt;,所以當你打電話element.html(),你甚至不會發現的一個實例該字符串中的<>

第2期

由於$interpolate服務已經由$interpolateProvider「提供」,它看起來並不像您可以編輯startSymbol和endSymbol。 但是,您可以將您的自定義startSymbol和endSymbol動態轉換爲鏈接函數中的角度開始/結束符號。

解決方案

myApp.directive('underscoreTemplate', function ($parse, $compile, $interpolate) { 
    return { 
     restrict: "A", 
     link: function(scope, element, attrs) { 
      var startSym = $interpolate.startSymbol(); 
      var endSym = $interpolate.endSymbol(); 
      var rawExp = element.html(); 
      var transformedExp = rawExp.replace(/&lt;%=/g, startSym).replace(/&lt;%-/g, startSym).replace(/%&gt;/g, endSym); 
      var parsedExp = $interpolate(transformedExp); 

      scope.$watch(parsedExp, function(newValue) { 
       element.html(newValue); 
      }); 
     } 
    } 
}); 

替代

我不知道怎麼樣,但我敢肯定有辦法使用實例自己的自定義$interpolate服務的$interpolateProvider(配置它下劃線標記後) 。

+1

謝謝,這個作品很棒!我做了一個小改動(用'g'使用正則表達式)來替換所有的實例:http://jsfiddle.net/e3s5d/ –

+0

偉大的呼叫。更新了答案。 – colllin

+0

現在您已經指出了'<% - '語法,我意識到下劃線中的默認'<%='更類似於角色的'

'。也許你可以在這個指令中添加一些邏輯來允許非轉義的html,用''​​'替換原始表達式中的''%%''。參考:http://stackoverflow.com/a/10971756/361609 – colllin