Is there a way to allow data bind with html rendering in polymer?
For example in AngularJS there is the "ng-html-bind" directive that does the job. I am searching something similar.
Here it follows an example of where I am willing to use it.
<core-tooltip>
<core-icon icon="info-outline" size="30"></core-icon>
<div tip>
{{box.description}}
</div>
</core-tooltip>
Otherwise any suggestion on how to do it differently?
I am loading this data from a json file and I am searching for a general way to allow "safe" html rendering (against XSS).
This has been answered a couple of times:
How to inject HTML into a template with polymer
How to display html inside template?
As suggested in the accepted answer, I associated an id to my tooltip div:
<div id="tipContent" tip>
{{box.description}}
</div>
Then made my element listen to the box changes:
Polymer("nautes-box",{
boxChanged: function(){
this.$.tipContent.innerHTML = this.box.description.chunk(40).join("<br /><br />");
}
});
I hope this answer will eventually be useful :)
Related
I'm setting HTML returned from the API in my Angular component:
<div [innerHTML]="content"></div>
content in this example is something like this:
<table>
<tr>
<td>[audioPlayer:file.mp3]</td>
</tr>
</table>
Now I would like to inject the actual component inside the table cell.
If I make a certain container, I can create the component with createComponent:
audioPlayerComponentRef: ComponentRef<AudioPlayerComponent>;
#ViewChild('placeholder', { read: ViewContainerRef }) container;
const factory: ComponentFactory<AudioPlayerComponent> =
this.componentFactoryResolver.resolveComponentFactory(AudioPlayerComponent);
this.audioPlayerComponentRef = this.container.createComponent(factory);
Then I can inject it into a container in the template:
<div #placeholder></div>
However, going back to my original goal, I can't use such a container, as the component needs to be injected into a specific position into an innerHtml block.
I've been brainstorming all day, but I can't see any way to achieve this.
Generally speaking, this is contrary to the way Angular works. [innerHTML] is not parsed for any Angular functionality. No component selectors or even a ViewContainerRef can be found there. Rather, even remotely suspicious HTML, CSS and JS is removed as a security measure as Angular only trusts its own templates.
So InnerHTML is a no-go. But I was in the same boat myself and have written a library to solve this exact problem. With it, you can freely load dynamic components into strings without compromising security. If you're still stuck on this, you might wanna have a look at it.
I create html components with Thymeleaf. Components are declared in separate file:
Declaration of basic button in buttons.html
<div th:fragment="btn-basic" class="btn btn-basic" th:text="${text}" th:classappend="${class}">
Button
</div>
The idea is to provide some type of tool-set for components. Code for using this component will be:
<div th:replace="~{buttons :: btn-basic (text='Button Text', class='button-class')}"></div>
It's working well, but I think about case when button need to have attributes like: onclick="..." or data-customAttr="..." or any other attribute. And here goes the problem:
How to pass attributes to button?
One way is to pass it as parameter of fragment, but it's too ugly.
Is there any way to get attributes of placeholder in fragment? (see example below)
This how I want to call fragment:
<div th:replace="~{buttons :: btn-basic (text='Button Text', class='button-class')}" onclick="..." data-customAttr="..."></div>
and in btn-basic fragment want to get these attributes and attach to it. Something like this:
<div th:fragment="btn-basic" class="btn btn-basic" th:text="${text}" th:classappend="${class}" onclick="..." data-customAttr="...">
Button
</div>
Any ideas?
I had a similar idea, but the question is, if the customizing of a component is as complex as the result, what is the benefit?
Btw. with the Thymeleaf Layout Dialect you can do something like this: https://ultraq.github.io/thymeleaf-layout-dialect/Examples.html#reusable-templates, I favor that, instead of the everything-as-parameter approach.
My Html Code is
<div ivh-treeview="menuPermissionObj.generalAssetManagement"
ivh-treeview-expand-to-depth="-1"
ivh-treeview-on-cb-change="changeCallback(ivhNode,ivhIsSelected, ivhTree)">
</div>
i used this plugin
https://github.com/iVantage/angular-ivh-treeview
is there any way to hide parent checkbox?
thanks in advance.
Yes, but you will need to use a custom node template.
See the list of supported helper methods and scope variables in your templates here: https://github.com/iVantage/angular-ivh-treeview/blob/master/docs/templates-and-skins.md#supported-template-scope-variables
Both isLeaf(node) and the depth variable will pair well with ng-show.
So I'm trying to hit this "Review Agreement" button:
which has the following html code:
<section class="col-33 text-right">
<button class="anchor-button bordered" ng-click="onClickReviewAgreement()">Review Agreement</button>
</section>
BUT apparently it's loaded from another resource, so findElement(By.*) doesn't work on it - I've also tried By.xpath("/html/body/ul/li[2]/notification-bar/ul/li/section[1]/section[2]/button")-. All the related code I'm getting in View Page Sources is:
<!-- Agreement form modal -->
<ui-modal
ui-modal-id="ui.modals.agreementFormModal"
ui-modal-class="takeover agreement"
ui-modal-controller="AgreementFormController"
ui-modal-template-url="paths.templates + '/components/forms/tpl.agreement-form.html'"
ui-modal-has-dimmer="true">
</ui-modal>
Is there any way I can select these kinds of elements?
You should be able to bind to ng-click="onClickReviewAgreement()" using css. It should be unique and css is a better and more efficient alternative to xpath
Try using css to find the element and click thereafter -
WebElement buttonElement = driver.findElement(By.cssSelector('[ng-click="onClickReviewAgreement()"]'));
buttonElement.click();
Is there a way to allow data bind with html rendering in polymer?
For example in AngularJS there is the "ng-html-bind" directive that does the job. I am searching something similar.
Here it follows an example of where I am willing to use it.
<core-tooltip>
<core-icon icon="info-outline" size="30"></core-icon>
<div tip>
{{box.description}}
</div>
</core-tooltip>
Otherwise any suggestion on how to do it differently?
I am loading this data from a json file and I am searching for a general way to allow "safe" html rendering (against XSS).
This has been answered a couple of times:
How to inject HTML into a template with polymer
How to display html inside template?
As suggested in the accepted answer, I associated an id to my tooltip div:
<div id="tipContent" tip>
{{box.description}}
</div>
Then made my element listen to the box changes:
Polymer("nautes-box",{
boxChanged: function(){
this.$.tipContent.innerHTML = this.box.description.chunk(40).join("<br /><br />");
}
});
I hope this answer will eventually be useful :)