I am having a compatibility issue with Angular UI Bootstrap Modal and sightly Parameters. When I try to render the sightly parameters inside the Modal the modal does not render the value in the sightly parameters as:
<script type="text/ng-template" id="stackedModal.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title-{{name}}">${properties.something} </h3>
</div>
<div class="modal-body" id="modal-body-{{name}}">
${properties.something}
</div>
</script>
As far as I have observed, there is an issue with printing inside the script tag.
Can someone help me if they have got the same issue?
Modal that I am using is Angular UI Bootstrap verion : 2.3 : http://angular-ui.github.io/bootstrap/
First, you need to provide more context, where your HTML is located? your folder structure and what you are trying to achieve.
Second, Sightly happens on the back-end and Angular in the browser so you should not have incompatibility there, I think your problem is somewhere else.
By default, HTL/Sightly includes XSS protection. In this case, for ${properties.something} the implicit scriptToken context is used (https://github.com/Adobe-Marketing-Cloud/htl-spec/blob/master/SPECIFICATION.md#121-display-context) and probably cuts off the content (in case it has characters that are not allowed in that context).
You can probably set a more relaxed context: ${properties.something # context='html'}
Related
In my application, I am using Angular UI bootstrap with AEM and having the sightly parameters in the same.
The issue is, when I try to access the sightly parameters inside the script tag of UI modal It is not rendenring the sightly parameters.
< script type="text/ng-template" id="/view2.tpl" data-sly-include="template.html">
${properties.title}
< /script >
This specific problem is there with Sightly with AEM and angular. Can anyone suggest how to make a Modal work for Angular+AEM+sightly?
Help will be highly appreciated.
As per the specification, using data-sly-include will cause the content of the <script> tag to be replaced with the content of the included script.
If you want to use HTL/Sightly templates from template.html you should instead write data-sly-use.tpl="template.html"
First, for using templates, use the data-sly-use instead of data-sly-include.
Second, HTL (Sightly) escapes the expressions by default depending on the context where they are used. You can explicitly specify the context using the context option as shown below.
<script type="text/ng-template" id="/view2.tpl">
<!--/* Use scriptString if you are using the value as a string */-->
${properties.title # context='scriptString'}
<!--/* In case you are trying to output an entire function or javascript,
there is no context specifically available for that. So, you can use the
unsafe option to disable escaping completely */-->
${properties.title # context='unsafe'}
</script>
More information on Display Context can be found here and information on Template and Call here.
I currently building a mobile hybrid application using Material Design Lite but I've encountered a slight issue. When I'm adding input field elements to my pages, the floating text or even the placeholder does not work correctly.
I'm using $stateProvider and $urlRouterProvider in my application for page navigation. Inside my index.html I have <div ui-view></div> in which I inject my views when my states change using <a ui-sref="home">Home</a> for example.
The problem I'm having is that if insert the following code into index.html outside of the ui-view of course:
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
The floating label works no problem. However, if I place the same code inside a view (external page that is later injected inside the ui-view element after page navigation occurs), the floating label does not work correctly. The label does not float up, and the text entered is unreadable.
There are no errors displayed in my console and I can't seem to figure out why it won't work. The JS files and CSS are loaded in correctly.
Hopefully someone can help me out with this.
Thanks everyone!
You have to upgrade the elements using "componentHandler.upgradeElements()"
I am using angular with sightly. So I have angular html template surrounded by script tag, which also has sightly attributes like data-sly-resource.
Below example code will give you clear idea.
<script type="text/ng-template" id="example.html">
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" >
<div ng-include="'private/textOverImage.html'" data-sly-test="${!wcmmode.edit}"></div>
</section>
</script>
It works fine in non-edit mode , but in edit mode, I can not author data-sly-resource part. It looks like <script> tag is not letting it work roperly because when I remove <script> tag ,than I can author it.
And removing script tag is not an option as well.
So how can I stop script tag form breaking sightly functionality in edit mode?
I ended up doing repetition of code , one for author mode and other for non edit mode.
Below is close resemblance of my solution.
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" data-sly-test="${wcmmode.edit}" >
<div ng-include="'private/textOverImage.html'"></div>
</section>
<script type="text/ng-template" id="example.html" data-sly-test="${!wcmmode.edit}">
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" >
<div ng-include="'private/textOverImage.html'"></div>
</section>
</script>
As you can see in above code, what to show and when works via data-sly-test="${wcmmode.edit}".
I also tried to to create sightly template for redundant code and than try data-sly-use but now, it works in author mode but sightly can't put template inside <script> tag even though I used # context='unsafe'
There is a workaround based on the Sightly Reference
Put the markup inside a separate html file say mymarkup.html parallel to mycomponent.html
In Component HTML file (e.g mycomponent.html) use <script type="text/ng-template" data-sly-include="mymarkup.html"></script>
In mymarkup.html we can use Sightly tags normally and those would be evaluated/executed normally, we would not even need to specify the # context for variables we would read using use API. The final markup rendered by component mycomponent.html when dragged to page would render something like this below
<script type="text/ng-template">
//mymarkup.html evaluated content here
</script>
In your script tag you could add data-sly-unwrap="${wcmmode.edit}"
This will remove script tag in edit mode allowing you to edit included components but in any other mode the script tag gets rendered.
I found the following mention in Netcentric's AEM Sightly Style Guide:
Then, because the HTML grammar ignores elements located inside a
< script > or < style > elements, no block statement can be used within
them.
Although it's not explicitly stated in the Sightly spec, it makes sense. So your fix is right.
I'm new on Angular JS + Bootstrap 3 and I'm trying to do something for maps. the thing is that I need to open a modal, and then from a button of that modal open another modal.
This is the external html:
<div class="modal-header">
<h1>Editor<h1>
</div>
<div class="modal-body" >
<button class="btn btn-primary" ng-click="treureModalEdit()" data-dismiss="modal">Afegir Punt</button>
</div>`
Here is my example: http://plnkr.co/edit/Zx68EQ?p=info
If something does not load is because libraries, but i only need help where the button 'Posa Marcador!' is.
Some code is in catalan, sorry if that discourages you to help me.
Thank you!
If you inspect with your browser's developer tools the first modal that you open you will see that the markup for this modal is appended to the end of your HTML body, which means that the modal is not nested in your <div ng-controller="DialogDemoCtrl">. This in turn means that the modal does not have a controller of its own, and therefore cannot "understand" the ng-click="treureModalEdit()" you have defined for your button.
In order to fix this problem you should create a second controller and use it for your modal. The treureModalEdit() would then be placed into that second controller.
A few other comments I have on your code:
You use things like data-toggle="modal" data-target="#modalEdit", however this is how you would be opening your modal if you did not have an Angular application. In your Angular application what you actually use is the ng-click="func()" you have put on the button. You can therefore clean all this dead code from your HTML (data attributes and modal template).
If you are new to Angular I would suggest using a newer version in order to avoid any problems which might be fixed in newer versions. You can use the latest version (1.4.0) or a 1.2.x version is you need to support IE8 (which is not officially supported since Angular version 1.3.x.
I'm using Angular JS and Angular IU-Router in my project and using a lot of ui-views. I have a situation where I need to change the language of the site, therefore I need to swap my ui-view's model to another model with the relevant language. I already have a service that detects the relevant model and passes it into the ui-view's controller. So if I can reload the ui-view, then in theory my problem would be solved.
I recall reading something about automatically reloading a ui-view (or possibly an ng-view) and re-instantiating its controller, but after much searching I haven't been able to find that information again.
Does anyone know what it is I'm looking for?
1 Take a look at angular-translate
https://github.com/PascalPrecht/angular-translate
2 In your case, add some if-else control ( ng-if, ng-switch etc. ) in the outer div, use the same subview in the inner div. Then change the settings.currentLang when the language changes may cause the subview reload (not tested).
<div ng-controller="containerCtrl">
<div ng-if="settings.currentLang=='en'">
<div ui-view='subview'></div>
</div>
<div ng-if="settings.currentLang=='ja'">
<div ui-view='subview'></div>
</div>
</div>