I have the following directive...
app.directive('layoutPreview', function () {
return {
restrict : 'E',
transclude : false,
scope: {
layout: '#',
previewid : '='
},
controller : function($scope){
console.log($scope.layout);
console.log($scope.previewid);
layoutPreview($scope.layout, "canvas-layout-" + $scope.previewid);
},
template:
'<canvas height="200" width="350" id="canvas-layout-{{previewid}}">' +
'</canvas>'
}
})
Which, once placed renders a canvas with a preview. However, {{previewid}} inside the template never resolves and I'm unsure why. Both of the log outputs show the correct values too. Even an output in my layoutPreview() function shows the correct id of the element it should be searching for.
Inspecting the page shows that the angular binding hasn't resolved.
Any ideas?
I think it's because the template gets rendered before the controller is created, and therefore the bindings do not work; ie $scope does not exist at the time of rendering.
Try:
template: function($attrs) {
return '<canvas height="200" width="350" id="canvas-layout-'
+ $attrs.previewid
+ '"></canvas>';
}
Also, if previewid is just a string, use:
scope: {
previewid : '#'
},
= is for two-way binding and objects.
This will insert the previewid before rendering the template.
Sidenote: You don't have to include transclude: false if it's false, and I would recommend using component instead of directive if you use Angular 1.5+.
I am NOT using serverPaging and Virtual Paging.
Scenario : I have a dropdownlist when get changed it loads the grid.First time I load 100 data items & everything works correctly.
When I change the dropdownlist which will fetch large data like 20,000 total data items it get loaded & works correctly if the navigation is through clicking page number at bottom of grid.
Problem : when I click 'Go to the Last Page' button it shows the Previous POST request's last part of dataItems(90-100 previous date items )showing 100 as total dataitems wrongly.When I click previous page number it loads 80-90 items of correct data updating total size 20,000.
I find if I refresh the grid using pageable refresh button and navigate to the last page it works correctly..After grid's initialisation I tried of calling datasource read() and grid's refresh() but still problem persist.
Kindly help. I am using Kendo UI v2013.1.226.
Thanks in Advance.
FYI: I cant use serverPaging and Virtual Paging due to some restriction .
var myDataSrc = new kendo.data.DataSource({
pageSize : 20,
batch: true,
transport:
{
read: {
url: "../../api/getList",
dataType: 'json',
complete: function(e) {}
},
parameterMap: function(options, operation) {
if (operation == 'read') {
return {
dropdDownId : selectedDD.id
};
}
}
},
schema :
{ model :
{
id : "id",
fields :{
id : {type : "number"},
name:{type:"string"}
}
}
}
});
$("#myGrid").kendoGrid({
dataSource : myDataSrc,
selectable : true,
navigatable : true,
resizable : true,
sortable : true,
pageable:{refresh:true},
scrollable : true,
autoBind : true,
filterable:true,
columns : [ {
field : "name",
title : "name",
width : 150
} ],...
});
};
I have put the question at the bottom as the only way I could explain my problem was with an example so with out the example it might not make sense but feel free to skip down to the bottom and just read the question.
I will use this example to try give some idea of what I do understand and where my understanding falls down.
I want to build a page where I can browse through a collection of items which I would set up like this:
angular.module('App')
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('browse', {
url: '/browse',
templateUrl: 'app/browse/browse.html',
controller: 'BrowseCtrl',
title: 'Browse',
mainClass: 'browse'
});
}]);
Each item is pulled through and place on this page using ng-repeat and then calling an api:
$scope.items = [];
$http.get('/api/items').success(function(items) {
$scope.items = items;
socket.syncUpdates('Item', $scope.items);
$scope.totalItems = $scope.items.length;
$scope.$watch('currentPage + itemsPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;
$scope.filteredItems = $scope.items.slice(begin, end);
});
});
This then accesses the api and repeats out the items. So far so good. Heres an example of the API setup. Worth mentioning I am using the Angular-fullstack generator which plugs in to Mongo DB using Express & Sockets.io
Item.find({}).remove(function() {
Item.create({
"image_url" : "../../../assets/images/test.jpg",
"title" : "Test Item",
"created_on" : new Date(2014, 9, 23, 3, 24, 56, 2),
"creator" : {
"profile_img" : "../../../assets/images/stephanie-walters.jpg",
"username" : "StephW",
"url" : "/stephanie-walters",
"first_name" : "Stephanie",
"last_name" : "Walters",
}
}
Ok now this is where things start to get unclear for me.
I now need to create the item pages, so that when I click on an item I get access to the content of that item. Short of creating every single page for every entry I would very much like to be able to create a page template that ui-router is able to attach content to when the correct url structure is met.
Thats probably not clear so let me try be a bit clearer. Lets say if we follow that JSON above I want to go to 'Stephanie Walters' profile I am going to need three things.Firstly a profile template, secondly I need the content for the profile in an api call and lastly a dynamic url that can take that api content and put it in to the page template.
Perhaps something similar to:
.state('profile.username', {
url: '/:username',
templateUrl: '/partials/profile.username.html',
controller: 'profileUsernameCtrl'
})
But I don't exactly understand how to get the take a variable like username from the item JSON(above) and then use that to build a URL /:username that connects to a template page profile.username.html and further still fill that page with the users content that is stored in another API call.
To "build a url" so to speak, you need to use the ui-sref directive.
Given a state like so:
.state('profile.username', {
url: '/:username',
templateUrl: '/partials/profile.username.html',
controller: 'profileUsernameCtrl'
})
to create a link to this state use:
<a ui-sref="profile.username({username: user.name})">{{ user.name }}</a>
where user is an attribute on the scope where that link is displayed.
For more complex URLs you just add additional parameters like so:
.state('browse.item', {
url: '/:username/:itemId'
})
To get the parameters you use the $stateParams service in your controller like so:
.controller('MyController', function($scope, $stateParams) {
$scope.username = $stateParams.username;
$scope.itemId = $stateParams.itemId;
})
I write text description in tinymce with spaces and html(line break and others etc etc).then i save it to mysql database.when i get it again and alert it,it shows me as same as it was.so till now it is fine.
When again i add it to tinymce to edit it,all html and spaces disappears..what can be the issue?
Here is my code
$('#description').tinymce({
// Location of TinyMCE script
script_url : 'tinymce/jscripts/tiny_mce/tiny_mce.js',
// General options
width : "825",
height: "300",
theme : "advanced",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_toolbar_location : "top",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,bullist,numlist,spellchecker",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
force_br_newlines : true,
force_p_newlines : false,
gecko_spellcheck : true,
forced_root_block : '', // Needed for 3.x
plugins : "paste,spellchecker",
spellchecker_languages : "+English=en,Russian=ru",
// encoding : "xml",
// Example content CSS (should be your site CSS)
content_css : "tinymce/examples/css/content.css",
//
apply_source_formatting : true,
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
here is how i am getting value
alert(json.description_demo);//this is ok
$("#description").val(json.description_demo);
alert($("#description").val());//now this is not ok..here is issue
tried this also
alert(json.description_demo);//ok
tinyMCE.get('description').setContent(json.description_demo);
alert(tinyMCE.get('description').getContent());//issue not ok
images
You will have to use tinyMce features to get ans set the value.
Try using
tinyMCE.get('description').getContent() to get the value
tinyMCE.get('description').setContent(value from db) to set the value.
Chekout tinymce docs http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent
I'm trying to insert a placeholder in html code that will be replaced later on dynamically. So far I managed to get the code inserted, and TinyMCE recognizes the tag, but when I try to append an id attribute to it, the attribute gets removed for an unknown reason. I tried most of the additional options, but none seem to work.
Current config:
extended_valid_elements : "module[id]",
valid_children : "module[img]",
custom_elements : "module",
The code to create the button (and subsequently insert the code):
setup : function(ed) {
// Add a custom button
ed.addButton("module", {
title : "Module",
image : "images/app-x-php-icon.png",
onclick : function() {
ed.focus();
var options = document.getElementById('rendermcemods').innerHTML+"";
var optionList = options.split('|');
var name=prompt("Please enter module name out of: "+options,optionList[0]);
for(var i=0;i<optionList.length;i++){
if(optionList[i] == name){
var patt=new RegExp('<module id="'+name+'">.*</module>','ig');
var content = '<module id="'+name+'"><img src="images/app-x-php-icon.png" /></module>';
//alert(content);
if(! patt.test(ed.getContent())){
ed.execCommand('mceInsertContent', false,content);
}
}
}
}
});
}
As you might notice, there's an alert before the insert, which I used to verify that the content is right...
When use the button to insert the code and then view the html, this is what I get:
<module><img src=images/app-x-php-icon.png" alt="" /></module>
Would anyone know how to fix this?
Update:
full config settings for tinyMCE:
// General options
mode : "none",
theme : "advanced",
plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,\n\
save,advhr,advimage,advlink,emotions,iespell,inlinepopups,\n\
insertdatetime,media,searchreplace,print,contextmenu,paste,\n\
directionality,fullscreen,noneditable,visualchars,\n\
nonbreaking,xhtmlxtras",
// Theme options
theme_advanced_buttons1 : "fullscreen,help,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect,|,module",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,insertdate,inserttime,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,ltr,rtl,|,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,blockquote,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Skin options
skin : "o2k7",
skin_variant : "silver",
document_base_url : "http://www.example.com",
content_css : "content.css",
extended_valid_elements : "module[id]",
valid_children : "module[img]",
/*custom_elements : "module", */
// Drop lists for link/image/media/template dialogs
external_link_list_url : "js/generateList.php?A=link",
external_image_list_url : "js/generateList.php?A=image",
media_external_list_url : "js/generateList.php?A=media",
setup : function(ed) {
// Add a custom button
ed.addButton("module", {
title : "Module",
image : "images/app-x-php-icon.png",
onclick : function() {
ed.focus();
var options = document.getElementById('rendermcemods').innerHTML+"";
var optionList = options.split('|');
var name=prompt("Please enter module name out of: "+options,optionList[0]);
for(var i=0;i<optionList.length;i++){
if(optionList[i] == name){
var patt=new RegExp('<module id="'+name+'">.*</module>','ig');
var content = '<module id="'+name+'"><img src="images/app-x-php-icon.png" /></module>';
//alert(content);
if(! patt.test(ed.getContent())){
ed.execCommand('mceInsertContent', false,content);
}
}
}
}
});
}
Another update: It might be interesting (and hopefully help to solve) to know that the id attribute isn't removed when tinyMCE is loaded and it already is in there, and a clean-up on existing code with the attribute doesn't remove it either.
I would put module to the valid_elements instead of the extended_valid_elements/custom_elements. The extended_valid_elements do sometimes behave strange.
My own config then looks like this (you will need to enlarge your own valid_elements and valid_children settings (if not used in your custom tinymce config you will have to use the defaults (can be found at the moxiecode website))):
// The valid_elements option defines which elements will remain in the edited text when the editor saves.
valid_elements: "#[id|class|title|style|onmouseover]," +
"module," +
"a[name|href|target|title|alt]," +
"#p,blockquote,-ol,-ul,-li,br,img[src|height|width],-sub,-sup,-b,-i,-u," +
"-span[data-mce-type],hr",
valid_children: "body[p|ol|ul|hr]" +
"module[img]" +
",p[a|span|b|i|u|sup|sub|img|hr|#text|blockquote]" +
",span[a|b|i|u|sup|sub|img|#text|blockquote]" +
",a[span|b|i|u|sup|sub|img|#text|blockquote]" +
",b[span|a|i|u|sup|sub|img|#text|blockquote]" +
",i[span|a|b|u|sup|sub|img|#text|blockquote]" +
",sup[span|a|i|b|u|sub|img|#text]" +
",sub[span|a|i|b|u|sup|img|#text]" +
",li[span|a|b|i|u|sup|sub|img|ol|ul|#text]" +
",ol[li]" +
",ul[li]",
The solution I ended up using was modifying the blockElementsMap and the transitional map taht are in the source code. That seemed to be the only way to get the custom tag recognized as 'blocklevel' element, as well as being able to add it exactly like I want in the code for later processing.