I'm inside my view.xthml which has facelets component in there. Like:
<ui:composition template="/layout.xhtml"> .. whatever
Being there I try to integrate AngualerJS, putting ng-view, like this:
<div ng-view> </div>
When my /view.jsf is rendering I got server side error:
Attribute name "ng-view" associated with an element type "div" must be followed by the ' = ' character.
So, it validates my html that prevents angular ng-view to start working.
The question is: how to integrate angularjs and its ng-view with jsf/facelets based on my case?
Facelets is a XML based view technology which uses XHTML to generate HTML output. In XML, each element attribute must have a value.
You can indeed assign it an empty string as value, but ng-view="true" or ng-view="ng-view" would be more self-documenting, keeping checked="checked" and selected="selected" in mind.
<div ng-view="true">
<div ng-view = "">
Looks not nice but it works for me on that stage (of getting rid of jsf).
Related
I am relatively new to angularJs so I am trying to learn how to do different things. I have been trying to make solutionName act as a p tag if there is no URL input for solutionUrl1, at the moment solutionName is acting as if it is hyperlinked even when its not. Any help would be appreciated.
<a ng-href="{{::data.solutionUrl1}}" class="card__title" style="text-align: center">
<span>{{::data.solutionName}}</span>
</a>
Use ng-if of angularjs to render either one or the other:
Something like this, you most probably have to change the condition to meet your needs. You can also create a new Variable in the JS files like showLink and set this variable to true/false depending on some conditions. And then just use this boolean variable to show/hide the link with the method outlined below:
<div ng-if="data.solutionUrl1">
<!-- code to render the link-->
</div>
<div ng-if="!data.solutionUrl1">
<!-- code to render just the span without the link -->
</div>
I'm using twitter bootstrap with a popover and got a AngularJS scoped variable to appear correctly. The below works.
(data-content="{{notifications[0].user}} shared {{notifications[0].user_two}}'s records")
When I add the following
(data-content="<b>{{notifications[0].user}} shared {{notifications[0].user_two}}'s records</b>")
No errors show up, but all of the {{}} no longer render.
So I tried this as a test of sorts
(data-content="<div ng-repeat='item in notifications'>test {{item}} <br/><hr/></div>")
Much like the last example, I see the "test" but not the {{item}}. And the "test" only show s up once, even though the notifications had three elements. When I look at the DOM there's this
<div class="popover-content">
<div ng-repeat="item in notifications">you <br><hr></div>
</div>
I've also tried just creating a directive to iterate through the array and make the output I want, but my attempt to set data-content equal to a directive have been failures. The examples I've found elsewhere I'm confident would work, but I just wanted to confirm before I begin implementing something like this (http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service) or (Html file as content in Bootstrap popover in AngularJS directive) that I'm not missing a straightforward fix to the problem I outlined above that would not require me creating a directive.
Edit:
Plunkr Url http://plnkr.co/edit/VZwax4X6WUxSpUTYUqIA?p=preview
html might be breaking it, try marking it as trusted html using $sce
How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+
$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
<button ... data-content="trustedHtml" ...> </button>
I would like to apologize that I couldn't provide any code snippet regarding this question, I am a newbie about AngularJS.
<div ng-repeat="item in list" ng-view></div>
Using the code above, would it be possible to render different template which would be dependent on item.type property. I was expecting a result like this:
item.type == "image" returning: <div><img src="'IMAGE_URI'"></div>
item.type == "text" returning: <div><p>TEXT</p></div>
As of now I have create a template html for the enumeration of item.type. Is this concern possible using AngularJS? I've recently learned that ng-view accompannied with ng-route.
I think one way you can do it is to use 'ng-if' to conditionally include html:
<div ng-repeat="item in list">
<div ng-if="item.type == 'image'><img src="'IMAGE_URI'"></div>
<div ng-if="item.type == 'text'><div><p>TEXT</p></div>
</div>
You can have only one ng-view,
take a look at this answer.
from the documentation for ng-view:
ngView is a directive that complements
the $route service by including the rendered
template of the current route into the main
layout (index.html) file.
Every time the current route changes,
the included view changes with it according
to the configuration of the $route service.
Requires the ngRoute module to be installed.
What you're looking for is ng-include, combined with ng-switch,
take a look at this answer on how to combine the two.
ng-include creates a new child scope, which in turn inherits from the controller.
have a look at this answer for more information about the topic.
I'm trying to use AngularJS built-in directives to achieve some simple JS effect without writing actual js code. It actually works pretty well, except the initial flash.
I know to deal with text, people should use ng-bind instead of {{}}
But how do you deal with directives like ng-if?
Here is my code:
<li ng-if="!magazines.resolved"> <!-- add "&& isOwner" when done -->
<dl>
<dt ng-model="changeToActivation" ng-init="changeToActivation=false" ng-mouseover="changeToActivation=true" ng-mouseleave="changeToActivation=false"><img ng-if="!changeToActivation" ng-src="<?php echo base_url('public/images/system_icons/add_magazine.jpg');?>">
<img ng-click="addMagazine()" id="activated" ng-if="changeToActivation" ng-src="<?php echo base_url('public/images/system_icons/add_magazine_activated.jpg');?>"></dt>
<dd class="magazineName">Create <br> A new magazine</dd>
<dd class="publishDate">Now!</dd>
</dl>
</li>
I know it gets a bit hard to read, but it's very easy. There is a model defined on <dt></dt> tag. If mouse is over this tag, the model value becomes true; when leaves, it becomes false.
Based on this boolean model value, one or the other image will be shown.
It works like a charm, but I can see both images at the very beginning, flashing!
How to deal with something like this then?
ngCloak may help, but you should also use ng-src for the actual image source, this will prevent your site from loading the image before the model has received a value. Also when using ngCloak, you may need to load the AngularJS source at the top of your html file as it may try to load the image before it knows what to do with the ng-cloak directive.
Applying ngCloak to you dt should do the trick for you: http://docs.angularjs.org/api/ng.directive:ngCloak
Here's an example from the docs. Note that it's added in two places- the directive as well as a class. The class is only needed for IE7 support.
<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>
Im trying to make a markdown editor with preview via angular filter calling showdown
<textarea ng-model="data.text"></textarea>
<div class="preview">{{data.text|markdown}}</div>
I managed to convert markdown markup on the fly into html but when rendered the actual output on the screen is like this :
<h1 id="thisisaheader">This is a header</h1>
It looks like the resulting markup is escaped. how do i render it unescaped?
You need to use ng-bind-html-unsafe:
<div class="preview" ng-bind-html-unsafe="data.text|markdown"></div>
It's up to you to guarantee that the content is trustful.
If you happen to be using Angular 1.2 RC1, then you should use ng-bind-html along with the new Strict Contextual Escaping service ($sce for short).