AngularJS指令類似於rails helper

Question

我是一個ngNoob，當涉及到angular時，剛開始使用它。我來自鐵軌，我真的很喜歡這個鐵軌助手的功能。基本上我可以做這樣的事情：

<%= my_helper param1: "some value", param2: "some other value" do %> 
    <div> 
    This is some html that will get wrapped in html defined in the helper. 
    </div> 
<% end %> 

助手叫my_helper只想捕捉&block並把它裏面的一些額外的html和將解析爲這樣的事情：

<div class="added-by-helper" data-params="some params from my helper"> 
    <span>Added by my_helper</span> 
    <div> 
    This is some html that will get wrapped in html defined in the helper. 
    </div> 
    <span>Other content from my_helper...</span> 
</div> 

我敢當然，這可以做角度，但我不知道如何。我讀過的地方$transclude可能會幫助，但我無法弄清楚如何做到這一點。

這怎麼可能在angularjs？

Answer 1

這絕對是正確的，這是transclude的作用。

這裏有一個簡單的指令，增加了一些內容：

var app = angular.module('plunker', []); 

app.directive('exampleDirective', function() { 
    return { 
     transclude: true, 
     restrict: 'EA', 
     template: '<div class="added-by-helper"><p>Added by helper</p><div ng-transclude></div></div>', 
     replace: true 
    }; 
}); 

他們關鍵部分是ng-transclude指令在模板內的div它是在已定義的內容將被放置的佔位符。

這裏的觀點：

<example-directive> 
    <p>extra content</p> 
</example-directive> 

，它呈現這樣的：

<div class="added-by-helper"> 
    <p>Added by helper</p> 
    <div ng-transclude=""> 
     <p class="ng-scope">extra content</p> 
    </div> 
</div> 

隨意玩耍上plunker;