You can customize the JqxScheduler's edit dialog by appending the existing containers in the editDialogCreate method like this:
var titleSelector = $(`
<div>
<div class='jqx-scheduler-edit-dialog-label'>Előadás</div>
<div class="jqx-scheduler-edit-dialog-field">
<div><v-select :options="options"></v-select></div>
</div>
</div>`);
fields.subjectContainer.append(titleSelector);
I understand that this HTML inside won't be rendered in my Vue file, but I cannot add the rendered this rendered version by copy-paste as far as I know:
<div data-v-0a61aa6a="" dir="auto" class="v-select vs--single vs--searchable">
<div id="vs1__combobox" role="combobox" aria-expanded="false" aria-owns="vs1__listbox" aria-
label="Search for option" class="vs__dropdown-toggle"><div class="vs__selected-options">
...
</div>
</div>
My question is: How can I render this HTML and add it to the dialog?
I am using webpack and vue-router.
PS: I have read about the Vue.Compile method, but if I am correct, I cannot use it here.
You have several options:
Iclude this code into your html markup and put v-if directive on it, to hide/show it if necessary: v-if docs
Also you can try to create separate component for your title selector with Vue.component('component-title', {...}), docs
Related
I am storing the HTML in a string and using it in the HTML file, I have used the HTML sanitize pipe.
below is my string
privacyNotice = "<div style=\"color: #ff0000;font-style: italic;\">Before continuing to the Application, you are required to read and acknowledge this Privacy Notice</div>......<div><input type=\"checkbox\" (change)=\"changeAcknowledgeBtnState()\"/><span class=\"pl-5\">I acknowledge terms of the privacy notice</span> </div> <div> <button class=\"ackBtn\" [disabled]=\"disableButton\" (click)=\"changePrivacyNoticeStatus()\">Acknowledge </button> </div>";
below is the html file code
<div class="container" [innerHTML]='privacyNotice | safeHtml'>
I have used the safeHtml pipe by referring this example
the disabled attribute to the button is not working and also changePrivacyNoticeStatus() is also not getting called
The safeHtml pipe only parses HTML, it is impossible to parse Angular code such as [disabled]="angularCode()" or (click)="changePrivacyNoticeStatus()". The [] and () syntax is part of Angular's data binding syntax that is compiled into Javascript when you are building your Angular project. Your string is provided at runtime and is expected to be pure and ready to go HTML: It can't be resolved from Angular code to Javascript at runtime anymore.
The fact that you are using dynamic content in the form of a string is considered a code smell in Angular, see if you can't solve this problem by writing a component for it and by providing Inputs to the component, rather than generating HTML code strings.
Another option could be content projection:
<app-privacy-notice>
<button class="ackBtn" [disabled]="disableButton" (click)="changePrivacyNoticeStatus()">
Acknowledge
</button>
<input type="checkbox" (change)="changeAcknowledgeBtnState()"/>
</app-privacy-notice>
privacy-notice.component.html:
<div style="color: #ff0000;font-style: italic;">
Before continuing to the Application, you are required to read and
acknowledge this Privacy Notice
</div>
<div>
<ng-content select="input"></ng-content>
<span class="pl-5">I acknowledge terms of the privacy notice</span>
</div>
<div>
<ng-content select="button"></ng-content>
</div>
I have a component A with its html/ts file. When I inherit a second component B from A, this will take all properties and method on the first. If I want to use the component A html, I can reference the comp A html in the templateUrl property.
I have a problem. I want use the component A html, but I want extend it. So my idea is "include" the first component html to the second. It's possible in Angular2? Is there another way?
I don't want to create an instance of component A in the component B. I want only the html markup.
EDIT:
In this example there is my problem:
https://stackblitz.com/edit/ng-content-projection-lzjwea
when I inherited the Hello2 ts, If I create an instance of hello component in hello2 html, it take its name property. I found three solutions:
Change all properties that need to be used in all inherit component to input and inject the
Duplicate html code
Find a way to reference the html of first component without creating an instance of it.
I think the best solution is the third. But I don't know a way to do it..
ng-content could be used to project dynamic content in a component.
For example, consider the following
hello.component.html
<div id='border'>
<h1>Base Component</h1>
<p>ng-content could be used for projecting dynamic content within a component</p>
<ng-content>
<!-- Dynamic content goes here -->
</ng-content>
</div>
So, now whatever that is in between
<hello>
<!-- dynamic html here -->
</hello>
app.component.html
<hello>
<div style="border: 2px solid red">
<h2>Child Component</h2>
<button id="sample1"> Sample 1 </button>
<button id="sample2"> Sample 2 </button>
</div>
</hello>
Example
Hope this helps
I have a View/View-Model pair that implements a popover custom attribute. My specific goals include dismissing the popover upon both button click within the popover itself, and from clicking anywhere else on the page.
I can get my doSomething() VM function to work on the element level in the view, but not within an attribute containing an element. I've explained the issue further in the code comments. I'd appreciate some guidance. Thanks!
blog.html
<template>
<require from="../popover/popover"></require>
...
<!-- doSomething() works here! -->
<button type='button' click.trigger='doSomething()'>ClickMe</button>
<!-- doSomething() does not work here! -->
<!-- `click.trigger`/`click.delegate` does not trigger anything, while `onclick` shows
"Uncaught ReferenceError: doSomething is not defined" -->
<span class="glyphicon glyphicon-star" popover="title.bind: blogpost.title; placement.bind: 'top'"
data-content='<button type="button" click.trigger="doSomething()">ClickMe</button>' ></span>
...
</template>
blog.ts
...
doSomething() {
console.log('doing something');
}
popover.ts
...
bind() {
$(this.element).popover({
title: this.title,
placement: this.placement,
content: this.content,
trigger: 'click',
html: true
});
}
I recently went through the same problem. I'm currently working on a Bootstrap port for Aurelia, it is not done yet, and I haven't written any documentation, but the popover is already implemented.
You are more than welcome to take a look:
https://github.com/tochoromero/aurelia-bootstrap/tree/master/src/popover
The way you are trying to implement the popover is going to be very complicated (if even possible), things are going to get messy with the scopes. If you only had text then it would be fine, but you basically want to be able to put anything in the popover and have it bound to the right View-Model.
The way I solved this was having a couple of Custom Elements that represent the popover, I have AubsCustomPopover, AubsPopoverTitle and AubsPopoverContent.
With this 3 custom elements you will create the bootstrap markup for the popover, and because you are adding them directly in the view they will have the right View-Model, and you can do whatever you want inside them.
And then, there is a custom attribute, this is AubsPopover, this is the one that will be in charge of showing and hiding the custom attribute depending on the trigger action you specify (hover, click, focus, outsideClick).
The code using it looks something like this:
<aubs-custom-popover model.bind="customPopover">
<aubs-popover-title>
This is my awesome title <i class="fa fa-star"></i>
</aubs-popover-title>
<aubs-popover-content>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" text.bind="password"
placeholder="Password">
</div>
<button class="btn btn-default" click.delegate="isOpen = false">
Close
</button>
</aubs-popover-content>
</aubs-custom-popover>
<button class="btn btn-primary"
aubs-popover="custom-model.bind: customPopover;
trigger: outsideClick;
position: bottom;
open.bind:isOpen">
Custom Popover
</button>
As I said the Popover is fully implemented but I haven't written any documentation, I want to have a couple of more components before I do that.
If you want to use it, I can give you some help setting it up.
I am trying to display the html tags from the data in the view.I have a data level which is $scope.level="<b>i should be bold</b>" and when the data is given in the template as given below should respect the html tag as well
<div ng-controller="MyCtrl" >
{{level}}
</div>
that is it should be bold without using
<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<b>{{level}}</b>
</div>
But with what i have tried so far i am not able to achive it.It is also showing the tag in the view.The issue is illustrated in this JSFiddle Here.
Is there anyway to achieve it.or am i totally wrong here?
You can use the ngBindHtml directive which evaluates the expression and inserts the resulting HTML into the element. Don't forget to include the ngSanitize directive.
https://docs.angularjs.org/api/ng/directive/ngBindHtml
Example :
app.js
angular.module('app', ['ngSanitize'])
.controller('Controller', function($scope) {
$scope.data = '<b>my text</b>'
});
index.html
<div ng-controller="Controller">
<p ng-bind-html="data"></p>
</div>
You can use ng-bind-html-unsafe:
<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<div ng-bind-html-unsafe="level"></div>
</div>
Unsafe because the DOM should generally not be modified inside a controller.
Why can't you move the <b> tags to the markup and then just interpolate the value of 'level'?
http://jsfiddle.net/u37xtpjd/2/
You can accomplish this using the ng-bind-html directive:
<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<span ng-bind-html="level"></span>
</div>
In my admin panel i got tinymce textarea. I want to preview all my changes.
i get html from tinymce
$scope.text_in = tinymce.get('myTextAreaName').getContent();
and it looks like:
<h1 style="text-align: center;">AAA</h1>
<h3 style="text-align: center;">BBB</h3>
I'm using ngSanitize and my element where i want to inject HTML
<div class="new" ng-bind-html="text_in"></div>
Thats looks ok, BUT. I got html markup without inline styles. All other styles from css works fine.
When i inspecting element there are
<h1>AAA</h1>
<h3>BBB</h3>
What am i doing wrong?
According to Angular documentation you can by pass the sanitize.
http://docs.angularjs.org/api/ngSanitize.$sanitize