Директива AngularJS похожа на помощник по рельсам

Question

Директива AngularJS похожа на помощник по рельсам

0

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

Oktav 26 июнь 2014, в 12:58

Теги:

ruby

1 ответ

Ещё вопросы

RobH · Accepted Answer · 2014-06-26T08-22-00.000Z

Вы абсолютно правы, что это то, что делает 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>

Не стесняйтесь играть на плункер;

Ух ты. Это было достаточно просто. Теперь мне просто нужно найти способ передать другую html структуру в шаблон, который должен отображаться вне ng-transclude но внутри шаблона. Спасибо!
Посмотрите на свойство templateUri директивы
Спасибо, но это не так. Я уже использую templateUrl потому что я не очень люблю html в строках. Я действительно искал что-то вроде github.com/zachsnow/ng-multi-transclude
@Oktav - о, я вижу! Это довольно мило, удачи с этим :)