I'm trying to figure out how to make a component render its children.
So I can compile:
<my-component>
<div id="child"></div>
</my-component>
into something like this:
<div id="parent">
<!-- some component stuff -->
<div id="child"></div>
</div>
Is there something like ngTransclude in Angular.Dart?
AngularDart uses Shadow DOM in place of ngTransclude. This is one of the ways we are pushing Angular into the browser with emerging web standards.
Adding a <content> tag instead your component's template will cause the child element to be placed there.
e.g. in your example <my-component>'s template might look like:
<div id="parent">
<!-- some component stuff -->
<content></content>
</div>
For even more awesomeness, you can use Shadow DOM's content selectors as well to control which child elements are displayed.
Related
I have components created with ng-repeat and I want them to be flex children:
<div style="display:flex; flex-wrap: wrap">
<div ng-repeat="item in data" style="flex-basis: 30%">
<my-component item="item"></my-component>
</div>
<div>
Where my component's template is:
<div class="c">
...
</div>
It is kind of working, but the my-component items are not all in the same height as they would have been if they were simply divs.
I can workaround this by setting .c{height: 100%} but it messes up with the wrapping.
Can I acheive this behaviour with AngularJS 1.5 at all?
Attached codepen for repro: http://codepen.io/anon/pen/ENqvvO
Thanks!
The problem is that when using the component you have a new element wraping the div.c element, so that the flex behaviour doesn't bound the two elements of your css. Your example (from plunkr) without the component works because it doesn't have the my-component in between.
div.flex-container
my-component // <- this guy is breaking off the flex connection
div.c
In order to fix it you can style the tag my-component instead of .c so that the flex can be applied directly between div.flex-container and my-component.
Actually I recommend you to create a container component and an item component so that things are kept clear and solid.
For example:
<list>
<list-item>Item 1</list-item>
<list-item>Item 2</list-item>
<list-item>Item 3</list-item>
<list-item ng-repeat="item in items"> {{ item }} </list-item>
</list>
And also:
<gallery>
<gallery-item ng-repeat="photo in photos">
<photo img="photo "></photo>
</gallery-item>
</galery>
Beautiful, isn't it? :{D
I have a directive which uses three different templates:
http://jsfiddle.net/edwardtanguay/pLrkya7r/4
These templates each have a panel and I want them to include a header template which is the same for each of them, like this:
<script type="text/ng-template" id="itemMenuTemplateUndefined">
<div class = "panel panel-default" >
<div ng-include="'itemMenuTemplatePanelHeading'"></div>
<div class="panel-body">
<div>Age: {{item.age}}</div>
</div >
</div>
</script>
The included template looks like this:
<script type="text/ng-template" id="itemMenuTemplatePanelHeading">
<div class="panel-heading">{{item.firstName}} <b>{{item.lastName}}</b> (PROBLEM INCLUDED BUT NO COLOR)</div>
</script>
The problem is that although it includes the scope variable values and HTML, it doesn't seem to have the same HTML structure which causes e.g. the panel header color not to display.
How can I get this example to work so that it has the same HTML structure as without ng-include so that Bootstrap continues to work?
The problem is that the bootstrap css is very specific in targeting the panel heading as a direct child of the panel using selectors like .panel-warning>.panel-heading.
The extra <div> for the ng-include breaks this child relationship making it
<div class="panel">
<div ng-include>
<div class="panel-heading>
Some possible choices:
Add appropriate classes to the ng-include div
Copy the css rules and replace the > in selector with a space
Use your own directive instead of ng-include and within the options
set replace:true
Is there something like angularjs directive's transclude attribute in polymer? Something what allows me to include some elements to a specific place in template?
I would like to achieve something like following:
<my-header title="My title">
<my-header-item name="Item 1"></my-header-item>
<my-header-item name="Item 2"></my-header-item>
</my-header>
which might be expressed:
<h1>My title</h1> <!-- "My title" given by my-header's title attribute -->
<ul>
<li>Item 1 <!-- given by my-header-item -->
<li>Item 2
</ul>
I am not sure if this is a task for polymer or if this is a typical way to use polymer. I am asking, because I started to like polymer and I would like to keep idiomatic thinking.
In Shadow DOM land, this is called distribution. To distribute light DOM nodes into the shadow dom, you use <content> insertion points.
http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees
It's quite literally a way to render nodes from light dom into placeholders in the shadow dom.
If you want to do tricky things with the my-header/my-header-item title/name attributes, you can do something like this:
<polymer-element name="my-header">
<template>
<ul>
<template repeat="{{item in items}}">
<li>{{item.name}}</li>
</template>
</ul>
<content id="c" select="my-header-item"></content>
</template>
<script>
Polymer('my-header', {
domReady: function() {
this.items = [].slice.call(this.$.c.getDistributedNodes());
}
});
</script>
</polymer-element>
Demo: http://jsbin.com/hupuwoma/1/edit
I have a more full-fledged tabs demo does this setup over on https://github.com/ebidel/polymer-experiments/blob/master/polymer-and-angular/together/elements/wc-tabs.html.
While admittedly I'm also new to polymer - I think I can answer this.
You should be able to substitute the value of an attribute into the template using the double-mustache syntax e.g.
<h1>{{title}}</h1>
See http://www.polymer-project.org/docs/start/creatingelements.html#publishing
In addition to this you can also substitute the content of a tag. For example if instead of using the "name" attribute in your my-header-item tag you instead had something like this...
<my-header-item>Item 1</my-header-item>
then you could substitute "Item 1" like this:
<li><content></content></li>
See http://www.polymer-project.org/platform/shadow-dom.html for this usage
I'm using a switch to conditionally include different content. I want the inner content (e.g. welcome directive) to replace the parent ng-switch element. I know that you can do this with custom directives using the replace=true configuration property, but is this possible to do with built in directives such as ng-switch?
<div id="container">
<ng-switch on="tabIndex">
<welcome ng-switch-when="welcome"></welcome>
<main ng-switch-when="main"></main>
<help ng-switch-when="help"></help>
</ng-switch>
</div>
For example, When the value of tabIndex is 'help', I want the following html to result:
<div id="container">
<help><!-- contents of help template --></help>
</div>
You'll always need the logic there, but you don't have to use an element for a switch. It'll work just as well as an attribute on the parent:
<div id="container" ng-switch on="tabIndex">
<welcome ng-switch-when="welcome"></welcome>
<main ng-switch-when="main"></main>
<help ng-switch-when="help"></help>
</div>
I think some sample code can explain my purpose.
Some html code with angular:
<div ng-init="buttons=['add','edit','delete']">
<div show-result-as-text>
<button ng-repeat="button in buttons">{{button}}</button>
</div>
</div>
You can see there is a custom directive "show-result-as-text" which I want to define. It should render the inner html code with angular directives, then show them as text.
The final html should be:
<div ng-init="buttons=['add','edit','delete']">
<div show-result-as-text>
<button>add</button>
<button>edit</button>
<button>delete</button>
</div>
</div>
And when the buttons value changes, the escaped html should also be changed.
I've tried to write one myself, but failed after 2 hours of work.
UPDATE
A live demo: http://plnkr.co/edit/fpqeTJefd6ZwVFEbB1cw
The closest thing I could think of is exemplified here: http://jsfiddle.net/bmleite/5tRzM/
Basically it consists in hiding the src element and append a new element that will contain the outerHTML of each src child.
Note: I don't like the solution but it works, so I decided to share it...