Я 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
?
Вы абсолютно правы, что это то, что делает 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
но внутри шаблона. Спасибо!