I have create a simple CKEditor widget that highlights the elements that have the class "pink".
I have also added a "Pinkify" button to the toolbar, which replaces the HTML of the selected element with some other elements that have the class "pink".
What I observe when I click the button is that widgets are not created for the freshly inserted elements. However, when I toggle between Source mode and WYSISYG mode, the widgets get created.
See the jsfiddle and its code:
CKEDITOR.replace('ck', {
allowedContent: true,
extraPlugins: 'pink'
});
CKEDITOR.plugins.add('pink', {
requires: 'widget',
init: function(editor) {
editor.widgets.add('pinkwidget', {
upcast: function(element) {
return element.hasClass('pink');
}
});
editor.addCommand('pinkify', {
editorFocus: 1,
exec: function(editor) {
var selection = editor.getSelection(),
selectedElement = selection.getStartElement();
if (selectedElement) {
selectedElement.setHtml("Let's have some <span class=\"pink\">pink</span> widget here!");
editor.widgets.checkWidgets(); // needed?
}
}
});
editor.ui.addButton('pinkify', {
label: 'Pinkify',
command: 'pinkify'
});
},
onLoad: function() {
CKEDITOR.addCss('.cke_widget_pinkwidget { background: pink; }');
}
});
I am aware of this question on Stackoverflow, but I can't get it to work with setHtml called on an element. Can you suggest how to modify the code so that widgets get created as soon as the HTML is updated?
According to the CKEditor team, it is normal that CKEDITOR.dom.element.setHtml does not instanciate widgets (see Widgets not initialised after calling setHtml on an element).
So the workaround they gave me was to rewrite the code that insert HTML in place of the selected element to:
if (selectedElement) {
selectedElement.setHtml("");
editor.insertHtml("Let's have some <span class=\"pink\">pink</span> widget here!");
}
For those like me who didn't know, editor.insertHTML inserts HTML code into the currently selected position in the editor in WYSIWYG mode.
Updated jsFiddle here.
I'm trying to create a window with a custom action using Angular-Kendo, and have reached a problem.
When using Kendo (minus angular) i would add functionality like explained here:
window.data("kendoWindow").wrapper.find(".k-i-custom").click(function(e){
alert("Custom action button clicked");
e.preventDefault();
});
However, in Angular-Kendo, access to the window object is by $scope.windowname and is only available after the kendo-window="windowname" directive.
I am currently bypassing this by binding the actions at the k-on-open like...
var firstLoad = true;
this.onOpenCallback = function () {
if (firstLoad) {
$scope.messageBodyWindow.wrapper.find(".k-i-custom").click(function (e) {
alert("OMG");
});
firstLoad = false;
}
This solution, however, feels like a cheap hack. is there a "proper" way to achieve this?
You could wrap the Angular-Kendo directive in a custom directive and put the desired functionality into the link function. This will register your custom binding once without any of this 'first time opening the window boolean' hackery.
<div custom-kendo-window>
</div>
The custom directive contains the kendo directive in its template...
.directive('customKendoWindow', function(){
return {
template: '<div kendo-window="win" k-title="\'Window\'" k-width="600" k-height="200" k-visible="false"> <div id="customAction" style="cursor: pointer;">custom click action</div></div>',
link: function(scope, element, attrs){
$('#customAction').bind('click', function(){
alert('Custom action fired!');
})
}
}
})
Here is a code pen showing the simple wrapper as shown above and then a configurable wrapper with the click binding being set up in the link functions of each of the directives.
I have a situation where I am wanting to observe the behavior of a view model as I am populating a form. I can do this with defining a lot of fields that look kind of like the model, and binding to them, but that is kind of messy.
I am currently accomplishing this with the following code;
(function ($) {
$.printJSON = function(value){
return JSON.stringify(value, undefined, 2);
}
})(jQuery);
var viewModel = kendo.observable({
// other fields etc
update: function (e) {
e.preventDefault();
$("#json_result").html($.printJSON(this));
}
});
<div style="width: 400px; float: left; padding-left: 15px;" >
<button data-bind="click: update" value="Update" >Update</button>
<pre id="json_result">
</pre>
</div>
So you click the button, and it runs the function to draw the view model JSON to the screen, all nice and formatted.
But this still requires a button click. While that isn't that big of a problem for me, since this isn't something I need for a lot of situations, is there any way to actually do this and have it update when the view model changes in any way? I tried to just bind to the function and it never updates without an explicit call, I tried binding right to the view model, and that didn't work either.
You could either simply bind the change event:
viewModel.bind("change", function (e) {
$("#json_result").html($.printJSON(this));
});
or you could use a calculated field:
var viewModel = kendo.observable({
field1: "field1",
field2: "field2",
field3: "field3",
print: function () {
// need to register for all fields so that the change event for print is triggered
for (var fieldName in this) {
if (this.hasOwnProperty(fieldName)) {
this.get(fieldName);
}
}
return $.printJSON(this.toJSON());
}
});
and bind to it with:
<pre data-bind="html: print">
See fiddle demonstrating both methods: http://jsfiddle.net/lhoeppner/S2WeB/
Normally, when I write the followings:
<a id="sta_numberOfIcons" class="icon-user" rel="popover"></a>
And js:
$("a[rel=popover]").each(function(){
$(this).popover({
trigger: 'hover',
placement: 'top',
html: true,
title:"Passenger Info",
content: "content "+$(this).attr('id')
})
.click(function(e) {
e.preventDefault()
});
});
It works and I can see a popover for the icon.But when I write the following code,to create the icons dynamically, but I cannot show popovers for the newly created icons.
html part:
Stations:
<select name="selectStation" id="selectStation" onchange="sta_callStation(this);"></select>
<a id="sta_numberOfIcons" class="icon-user" rel="popover"></a>
<div id="infoOfPassengers"></div>
<div id="distType"></div>
<div id="distParams"></div>
In Stations combobox, options are filled when the page is loaded.They are filled normally.
js function for getting the number of passengers from php, and create icons accordingly:
function sta_callStation(sel){
$('#noOfPassengers, #infoOfPassengers, #distType,#distParams').empty();
$('#sta_numberOfIcons').empty();
$.getJSON('Stations.php', function(station){
$.each(station, function(sta_key, sta_value) {
if(sel.value==sta_key)
{
$.each(sta_value.passengers, function(j,passengers)
{
var pas_icon = document.createElement("a");
pas_icon.className ='icon-user';
pas_icon.id='id_'+j;
pas_icon.setAttribute('href', '#');
pas_icon.setAttribute('rel', 'popover');
//alert('id_'+(j));
var empty=document.createElement("a");
empty.appendChild(document.createTextNode(" "));
document.getElementById('sta_numberOfIcons').appendChild(pas_icon);
document.getElementById('sta_numberOfIcons').appendChild(empty);
});
}
});
});
}
The icons appear in the page under the combobox.I just put to try, I don't know how to insert the new created icons to a tag.I just appended the newly created icons to tag.What is wrong here?Why I cannot show popovers for the created icons?Please help.
The JS code that you have which successfully wires-up the popover for elements $("a[rel=popover]") needs to execute after you have dynamically added your icons.
You could paste those lines into the end of the logic in sta_callStation() but it is probably better to put them into their own function and call that from sta_callStation().
Something like:
function bindMyPopovers() {
$("a[rel=popover]").each(function(){
$(this).popover({
trigger: 'hover',
placement: 'top',
html: true,
title:"Passenger Info",
content: "content "+$(this).attr('id')
})
.click(function(e) {
e.preventDefault()
});
});
}
What I am trying to implement is basically a "on ng repeat finished rendering" handler. I am able to detect when it is done but I can't figure out how to trigger a function from it.
Check the fiddle:http://jsfiddle.net/paulocoelho/BsMqq/3/
JS
var module = angular.module('testApp', [])
.directive('onFinishRender', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
element.ready(function () {
console.log("calling:"+attr.onFinishRender);
// CALL TEST HERE!
});
}
}
}
});
function myC($scope) {
$scope.ta = [1, 2, 3, 4, 5, 6];
function test() {
console.log("test executed");
}
}
HTML
<div ng-app="testApp" ng-controller="myC">
<p ng-repeat="t in ta" on-finish-render="test()">{{t}}</p>
</div>
Answer:
Working fiddle from finishingmove: http://jsfiddle.net/paulocoelho/BsMqq/4/
var module = angular.module('testApp', [])
.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit(attr.onFinishRender);
});
}
}
}
});
Notice that I didn't use .ready() but rather wrapped it in a $timeout. $timeout makes sure it's executed when the ng-repeated elements have REALLY finished rendering (because the $timeout will execute at the end of the current digest cycle -- and it will also call $apply internally, unlike setTimeout). So after the ng-repeat has finished, we use $emit to emit an event to outer scopes (sibling and parent scopes).
And then in your controller, you can catch it with $on:
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
//you also get the actual event object
//do stuff, execute functions -- whatever...
});
With html that looks something like this:
<div ng-repeat="item in items" on-finish-render="ngRepeatFinished">
<div>{{item.name}}}<div>
</div>
Use $evalAsync if you want your callback (i.e., test()) to be executed after the DOM is constructed, but before the browser renders. This will prevent flicker -- ref.
if (scope.$last) {
scope.$evalAsync(attr.onFinishRender);
}
Fiddle.
If you really want to call your callback after rendering, use $timeout:
if (scope.$last) {
$timeout(function() {
scope.$eval(attr.onFinishRender);
});
}
I prefer $eval instead of an event. With an event, we need to know the name of the event and add code to our controller for that event. With $eval, there is less coupling between the controller and the directive.
The answers that have been given so far will only work the first time that the ng-repeat gets rendered, but if you have a dynamic ng-repeat, meaning that you are going to be adding/deleting/filtering items, and you need to be notified every time that the ng-repeat gets rendered, those solutions won't work for you.
So, if you need to be notified EVERY TIME that the ng-repeat gets re-rendered and not just the first time, I've found a way to do that, it's quite 'hacky', but it will work fine if you know what you are doing. Use this $filter in your ng-repeat before you use any other $filter:
.filter('ngRepeatFinish', function($timeout){
return function(data){
var me = this;
var flagProperty = '__finishedRendering__';
if(!data[flagProperty]){
Object.defineProperty(
data,
flagProperty,
{enumerable:false, configurable:true, writable: false, value:{}});
$timeout(function(){
delete data[flagProperty];
me.$emit('ngRepeatFinished');
},0,false);
}
return data;
};
})
This will $emit an event called ngRepeatFinished every time that the ng-repeat gets rendered.
How to use it:
<li ng-repeat="item in (items|ngRepeatFinish) | filter:{name:namedFiltered}" >
The ngRepeatFinish filter needs to be applied directly to an Array or an Object defined in your $scope, you can apply other filters after.
How NOT to use it:
<li ng-repeat="item in (items | filter:{name:namedFiltered}) | ngRepeatFinish" >
Do not apply other filters first and then apply the ngRepeatFinish filter.
When should I use this?
If you want to apply certain css styles into the DOM after the list has finished rendering, because you need to have into account the new dimensions of the DOM elements that have been re-rendered by the ng-repeat. (BTW: those kind of operations should be done inside a directive)
What NOT TO DO in the function that handles the ngRepeatFinished event:
Do not perform a $scope.$apply in that function or you will put Angular in an endless loop that Angular won't be able to detect.
Do not use it for making changes in the $scope properties, because those changes won't be reflected in your view until the next $digest loop, and since you can't perform an $scope.$apply they won't be of any use.
"But filters are not meant to be used like that!!"
No, they are not, this is a hack, if you don't like it don't use it. If you know a better way to accomplish the same thing please let me know it.
Summarizing
This is a hack, and using it in the wrong way is dangerous, use it only for applying styles after the ng-repeat has finished rendering and you shouldn't have any issues.
If you need to call different functions for different ng-repeats on the same controller you can try something like this:
The directive:
var module = angular.module('testApp', [])
.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit(attr.broadcasteventname ? attr.broadcasteventname : 'ngRepeatFinished');
});
}
}
}
});
In your controller, catch events with $on:
$scope.$on('ngRepeatBroadcast1', function(ngRepeatFinishedEvent) {
// Do something
});
$scope.$on('ngRepeatBroadcast2', function(ngRepeatFinishedEvent) {
// Do something
});
In your template with multiple ng-repeat
<div ng-repeat="item in collection1" on-finish-render broadcasteventname="ngRepeatBroadcast1">
<div>{{item.name}}}<div>
</div>
<div ng-repeat="item in collection2" on-finish-render broadcasteventname="ngRepeatBroadcast2">
<div>{{item.name}}}<div>
</div>
The other solutions will work fine on initial page load, but calling $timeout from the controller is the only way to ensure that your function is called when the model changes. Here is a working fiddle that uses $timeout. For your example it would be:
.controller('myC', function ($scope, $timeout) {
$scope.$watch("ta", function (newValue, oldValue) {
$timeout(function () {
test();
});
});
ngRepeat will only evaluate a directive when the row content is new, so if you remove items from your list, onFinishRender will not fire. For example, try entering filter values in these fiddles emit.
If you’re not averse to using double-dollar scope props and you’re writing a directive whose only content is a repeat, there is a pretty simple solution (assuming you only care about the initial render). In the link function:
const dereg = scope.$watch('$$childTail.$last', last => {
if (last) {
dereg();
// do yr stuff -- you may still need a $timeout here
}
});
This is useful for cases where you have a directive that needs to do DOM manip based on the widths or heights of the members of a rendered list (which I think is the most likely reason one would ask this question), but it’s not as generic as the other solutions that have been proposed.
I'm very surprised not to see the most simple solution among the answers to this question.
What you want to do is add an ngInit directive on your repeated element (the element with the ngRepeat directive) checking for $last (a special variable set in scope by ngRepeat which indicates that the repeated element is the last in the list). If $last is true, we're rendering the last element and we can call the function we want.
ng-init="$last && test()"
The complete code for your HTML markup would be:
<div ng-app="testApp" ng-controller="myC">
<p ng-repeat="t in ta" ng-init="$last && test()">{{t}}</p>
</div>
You don't need any extra JS code in your app besides the scope function you want to call (in this case, test) since ngInit is provided by Angular.js. Just make sure to have your test function in the scope so that it can be accessed from the template:
$scope.test = function test() {
console.log("test executed");
}
A solution for this problem with a filtered ngRepeat could have been with Mutation events, but they are deprecated (without immediate replacement).
Then I thought of another easy one:
app.directive('filtered',function($timeout) {
return {
restrict: 'A',link: function (scope,element,attr) {
var elm = element[0]
,nodePrototype = Node.prototype
,timeout
,slice = Array.prototype.slice
;
elm.insertBefore = alt.bind(null,nodePrototype.insertBefore);
elm.removeChild = alt.bind(null,nodePrototype.removeChild);
function alt(fn){
fn.apply(elm,slice.call(arguments,1));
timeout&&$timeout.cancel(timeout);
timeout = $timeout(altDone);
}
function altDone(){
timeout = null;
console.log('Filtered! ...fire an event or something');
}
}
};
});
This hooks into the Node.prototype methods of the parent element with a one-tick $timeout to watch for successive modifications.
It works mostly correct but I did get some cases where the altDone would be called twice.
Again... add this directive to the parent of the ngRepeat.
Very easy, this is how I did it.
.directive('blockOnRender', function ($blockUI) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
if (scope.$first) {
$blockUI.blockElement($(element).parent());
}
if (scope.$last) {
$blockUI.unblockElement($(element).parent());
}
}
};
})
Please have a look at the fiddle, http://jsfiddle.net/yNXS2/. Since the directive you created didn't created a new scope i continued in the way.
$scope.test = function(){... made that happen.