I'm running into an issue where I want to display a title label such that there is (i) A primary title which appears as an h1 element and (ii) A sublabel within the h1 element but enclosed in the tag
Doing this works:
<div id="banner">
<h1>
{{rootLabel}}
<span><small>{{rootSubLabel}}</small></span>
</h1>
</div>
My issue with that code though is that the brackets and names for rootLabel and rootSubLabel are visible in the browser until angular properly reads them.
I've found that I can mask that issue by using Angulars ng-bind instead:
<div id="banner">
<h1 ng-bind="rootLabel">
<span><small ng-bind="rootSubLabel"></small></span>
</h1>
</div>
Unfortunately the second bind doesn't get rendered by Angular though.
What I'm wondering is how would something like this be done properly in Angular?
This is because
<h1 ng-bind="rootLabel">
<span><small ng-bind="rootSubLabel"></small></span>
</h1>
will replace everything inside the h1 with {{rootLabel}}
The correct way to use ng-bind in this case should be
<h1>
<span ng-bind="rootLabel"></span>
<span><small ng-bind="rootSubLabel"></small></span>
</h1>
Related
I have a list of items (divs) with a button. When I click on one of this buttons I can access the element using
$event.currentTarget
that returns some thing like
<div ng-click="myFunc()">
<i class="someclass"></i>
<span>bla bla</span>
</div>
how can I access and elements to modify attributes like class?
Don't. Use existing directives like ng-class or ng-if, etc in your html templates.
<div ng-click="clicked = true">
<span ng-class="{'someclass': clicked}">bla bla</span>
</div>
See stackblitz
Although you can get the html dom element and edit it you should only do this as a last option and other angularjs supported methods have failed or are not supported.
template
<div ng-click="myFunc($event)">
<i class="someclass"></i>
<span>bla bla</span>
</div>
controller
$scope.myFunc(event) {
var elem = angluar.element(event.currentTarget);
elem.children(".someclass").removeClass("someclass")
}
I'm trying to show the user a list of items inside of a popover that is all inside an ng-repeat. I'm using angularjs as well as the ui-bootstrap package (http://angular-ui.github.io/bootstrap/).
HTML
<div ng-repeat='session in sessions'>
<p popover="{{session.items}}">view items</p>
</div>
This will show the array session.items for each session, which contains the information I want to show. However, this shows the brackets of the array as well.
Does anyone know a clean way to do this?
any help would be appreciated, thanks in advance
From ui-bootstrap site you can read
uib-popover - Takes text only and will escape any HTML provided for the popover body.
So if you provide session.items you will get string '[my array content]'. In my opinion you need to use uib-popover-template where your template would be like
<div ng-repeat='session in sessions'>
<p uib-popover-template="'urlToMyTemplateHere'">view items</p>
</div>
------ Template
<div ng-repeat="item in session.items" ng-bind="item"></div>
uib-popover-template takes an url to the template so you have to create file for it to be fetched or try this approach ( I don't really like it but just for testing )
<div ng-repeat='session in sessions'>
<p uib-popover-template="'iamabadapproachtemplate.html'">view items</p>
</div>
<script type="text/ng-template" id="iamabadapproachtemplate.html">
<div ng-repeat="item in session.items" ng-bind="item"></div>
</script>
updated: made a smaller poc, in plunkr to show the problem without the entire application around it.
see it here
issue: data-ng-switch works on inline content, but does not remove the previous element when switching using external templates via data-ng-include.
works
<div data-ng-switch="view">
<div data-ng-switch-when="template1">content 1</div>
<div data-ng-switch-when="template2">content 2</div>
</div>
doesn't work
<div data-ng-switch="view">
<div data-ng-switch-when="template1" data-ng-include="'template1.html'"></div>
<div data-ng-switch-when="template2" data-ng-include="'template2.html'"></div>
</div>
Best solution I currently found can be seen in the plunkr
you basically cannot use ng-include on the same dom level as the ng-switch anymore. The same goes for other logical directives like ng-show ng-hide...
adding the ng-include on a child node of the ng-switch-when element works:
<div data-ng-switch="view">
<div data-ng-switch-when="template1">
<div data-ng-include="'template1.html'"></div>
</div>
<div data-ng-switch-when="template2">
<div data-ng-include="'template2.html'"></div>
</div>
</div>
update
Should be fixed in .rc3!
This was confirmed as a bug in the angular rc2 version (confirmation in this google group discussion).
The actual bugticket can be found here.
I've just started working on a project that requires me to learn AngularJS. What I'm trying to do is create two menus that slide into the screen, one from the left, one from the right. When they do this they push the content over.
Currently I can get one or the other to work, but not both. I realize this is because of the way that I'm defining the ng-class. I just can't quite conceptualize how to do it correctly.
<div ng-class="{true:'slide-left', false:''}[toggleSlide]" class="container">
<div class="content">
<button ng-click="toggleSlide = !toggleSlide" class="btn-left">From Left</button>
<button ng-click="toggleSlide = !toggleSlide" class="btn-right">From Right</button>
</div>
<div class="slide-from-left">
<p>Here is information that slides from off screen left.</p>
</div>
<div class="slide-from-right">
<p>Here is information that slides from off screen right.</p>
</div>
</div>
Set up the ng-class syntax like this for what you want:
<div ng-class="{'slide-left':toggleSlide, 'slide-right':!toggleSlide}" class="container">
Also, I'm guessing you were trying to adapt your code to something else you saw, so I'll offer something on that also. Here's an ng-class using ng-repeat's $index to dole out classes for even and odd:
ng-class="['even', 'odd'][$index % 2]"
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...