What is the below code for?
I am new to jade. The below is a code i am stuck with.
extends layouts/default
block content
div.column(ui-auth-directive)
Here extends is going to extend default.jade, then to that, it is going to append the div tag.
But I dont understand what does this div.column mean? and what is this ui-auth-directive mean?
Upto my understanding, div.abcd means that abcd is a class.. Could some one please help me in this regard.
Thanks,
Sabarisri
div.column(ui-auth-directive) will compile to:
<div class="column" ui-auth-directive></div>
Understanding what the directive does is up to you and your code. It will be defined by your angular module.
Related
I'm new to SFCC and I was wondering what is the best practices with writing conditional CSS classes in the ISML template. I couldn't find anything in the documentation specifically for element parameters but I have seen some code which works but doesn't look right to me.
<div class="foo <isif condition="${bar}">baz</isif>"></div>
Is this the right way to conditionally add a CSS class?
This is the documentation I've found for isif
https://documentation.b2c.commercecloud.salesforce.com/DOC1/index.jsp?topic=%2Fcom.demandware.dochelp%2FScriptProgramming%2FDemandwareJavaScriptExpressionsinISML.html
This variant is a little bit shorter
<div class="foo ${bar ? 'baz' : 'someting else'}></div>
From my understanding you first need to write the isml condition and inside it the html div, something like this:
<isif condition="${bar}">
<div class="foo">baz</div>
</isif>">
I'm only a couple months new to SFF so forgive me if I'm wrong.
I have two view editmode:"New" and editmode:"edit" and trying to add different style for a paragraph, how to do that?
<p style="margin-left: 165px;margin-top: -23px;">===some messages---</p>
I'm not sure I really understand your question but if you want to add a different style depending on a variable you can do it with ngClass
You can use it like this
<p ng-class="{myClass: var}">Some text</p>
If the variable 'var' is == true then it will add the class 'myClass' to the paraghraph
There is more way how to use it, you can refer to the documentatation
https://docs.angularjs.org/api/ng/directive/ngClass
I think you need to be a little more specific on your question, or perhaps offer up an example.
BUT if I am reading this correctly, I'd suggest giving the separate <p> tags an ID and changing the properties in a CSS file. Make sure to attach the CSS file to your index.html
For more clarification, go HERE and get a better idea of how CSS can help.
If this wasn't helpful, I apologize. The question left a lot to be desired
I'm trying to build some navigation directives to isolate complexity. I want the following HTML to render my navigation:
<custom-nav>
<nav-item>Item 1</nav-item>
<nav-item>Item 2</nav-item>
<nav-item>Item 3</nav-item>
</custom-nav>
If I wrote the directives right now, the resulting compiled HTML would look like this:
<custom-nav>
<nav>
<ul>
<nav-item><li><a>Item 1</a></li></nav-item>
<nav-item><li><a>Item 2</a></li></nav-item>
<nav-item><li><a>Item 3</a></li></nav-item>
</ul>
</nav>
</custom-nav>
however, this is invalid HTML (<ul>s can only have <li>s as children).
Without using replace: true, what is the best way for me to tackle this? The only things I can think of are:
Don't use <ul> or <li> - use aria roles to define my own list items.
Don't make the list semantically a list. I really don't want to do this.
Is there something I'm overlooking?
I am not sure if I understood the issue correctly, but what I can say is,
you can pass the items you want to use as li, in an array, as a parameter to the directive, and loop over it in your link function to generate the recommended html result, that would remove any complexity related to the issue
please let me know if I misunderstood you.
Best of luck
I am using angularjs from 2 months but never comes to problem like this, so thought of sharing with you people and getting some good suggestion on that. Here I am trying to apply ul/nav-group element dynamic values. Everything is working fine means, if I see developer tools on browser it gets value and everything, but not the +/- sign. I search on google its saying that it loads after DOM creation so it is not showing that. But no buddy tells the solution for that.
Consider my code:
<nav:group ng-repeat="parentChild in parentChildList" title="{{parentChild.filterText}}">
<nav:item data-view="/ui/icons/fa" ng-repeat="childs in parentChild.childList" data-icon="fa fa-lg fa-fw fa-plane" title="{{childs.filterText}}" />
</nav:group>
The value for particular fields are straight forward means its simple list.How the directive can solve this problem.
Appreciate any suggestions . Thanks.
Add an ng-cloak directive on the body tag of your app to prevent loading the element until angular has finished loading.
Your body tag would look like this:
<body ng-cloak>
...
</body>
You could also fix this by using promises in your services, that is definitely the best practice regardless, but ng-cloak is a quick and easy fix.
Hope that helps! If ng-cloak doesnt work for you post snippets of your controller and service and I will help you add promises.
Good Luck!
-Justin
I tried to translate project oppia.org
The code (angularJs, in template) has some things - <[stateName]>, I dont understant its construction <[]>. is It a variable? or is it a directive? is It a scope? Where is its value?
Code:
<h4 ng-if="!stateNameEditorIsShown" ng-click="openStateNameEditor()" class="oppia-editable-section">
<[stateName]>
<span ng-if="editabilityService.isEditable()" class="glyphicon glyphicon-pencil oppia-editor-pencil" title="Edit State Name"></span>
</h4>
Since jinja2 and angularjs both want to use {{ and }} for interpolation, one of them has to give. It's unclear from this example if that's angularjs or jinja2. If you explore the code you're translating, and find something like
$interpolateProvider.startSymbol('<[');
$interpolateProvider.endSymbol(']>');
then it's angularjs code that's using the alternative binding markers.
Edited to add:
See https://code.google.com/p/oppia/source/browse/core/templates/dev/head/app.js lines 38-39. That's where angularjs is being configured to use alternate binding markers.
I found it!
In file feconf.py:
DEFAULT_INIT_STATE_NAME = 'First Stage'
Neither. This is the alternative interpolation markup that your oppia.org code has been configured to use. I guess one of your programmers didn't like the default {{...}} mustache syntax and they went with <[...]> instead. The value will come from the same place as with the standard {{...}} markup.
Find this in your code and it will make more sense:
oppia.config([ "$interpolateProvider","$httpProvider",
function(a,b){
a.startSymbol("<[");
a.endSymbol("]>");
... ... ...
API doc on $interpolateProvider https://docs.angularjs.org/api/ng/provider/$interpolateProvider
Hope this helps.