javascript - AngularJS 指令类似于 Rails 助手

Question

说到Angular，我是一个ngNoob，刚刚开始使用它。我来自 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>

我很确定这可以以 Angular 来完成，但我不知道如何做。我在某处读到 $transinclude 可能有帮助，但我不知道如何做到这一点。

如何在 angularjs 中完成此操作？

Answer 1

你说的完全正确，这就是 transinclude 的作用。

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

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 指令，它是放置已定义内容的占位符。

这是 View :

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