AngularJS指令类似于rails helper

Question

我是一个ngNoob，当涉及到angular ，用它刚刚开始。 我来自Rails，我真的很喜欢Rails的辅助功能。 基本上我可以做这样的事情：

<%= 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

您完全正确，这就是超越的作用。

这是添加一些内容的简单指令：

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
    };
});

它们的关键部分是模板内部div上的ng-transclude指令，它是放置已定义内容的占位符。

这是视图：

<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>

随意玩矮人 ;