AngularJS指令，类似于rails的helper

AngularJS directive similar to rails helper

本文关键字：helper rails 类似于 指令 AngularJS      更新时间：2023-09-26

说到angular，我是一个新手，刚刚开始使用它。我来自rails，我非常喜欢rails helper这个特性。基本上我可以这样做:

<%= 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中完成，但我不知道怎么做。我在某个地方读到$transclude可能有帮助，但我不知道如何做到这一点。

如何在angularjs中做到这一点?

你完全正确，这就是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
    };
});

它们的关键部分是模板内部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>

可以随意摆弄柱塞;

相关文章：