I have started to use JSON editor library and angular wrapper from angular-tools/ng-jsoneditor.
The bug appears to be very annoying when switched to code view. Anyone had something similar?
Situation image
Situation image 2
Happens only when quotes appear on that line. Thats pretty every line for a JSON.
Using standart lib, nothing changed. I'm running out of ideas.
controller
$scope.obj = { data: null, options: { mode: 'code' } };
$scope.onLoad = function (instance) {
instance.expandAll();
};
view
<!DOCTYPE html>
<html ng-app="jsonapp" ng-controller="jsonController">
<head>
<meta charset="utf-8" />
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta content="charset=utf-8">
<link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="jsoneditor/dist/jsoneditor.min.js"></script>
</head>
<body>
<div ng-jsoneditor="onLoad" ng-model="obj.data" options="obj.options" style="height:800px"></div>
</body>
</html>
I had a similar problem, after a few hours of investigation finally I find that what causing it was the font-family style(I had global font for all app).
So I override it with ng-deep:: to font-family: monospace.
This was a solution in my case!
Related
I have a massive JSON schema and I want to generate an HTML/JS form from it. It appears that the react-jsonschema-form is a good solution to this problem. The framework has great documentation, but it focuses on development using npm. For reasons that are out of scope for this question, I have to use it only via CDN + React without JSX. Unfortunately, I am not a Web developer and I am having a hard time to figure out how I can use different themes when developing with the CDN + React with no JSX. For far I have the following index.html working as expected:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<script src="react-jsonschema-form.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
const schema = {
title: "Todo",
type: "object",
required: ["title"],
properties: {
title: {type: "string", title: "Title", default: "A new task"}
}
};
var e = React.createElement;
const Form = JSONSchemaForm.default;
ReactDOM.render(
e(Form, {schema: schema}),
document.getElementById("app")
);
</script>
</body>
</html>
The .js files are downloaded and copied in the same directory with index.html. I am using version 2.5.1 of react-jsonschema-form.
I would be more than grateful if someone could point me to the right direction as to how I can render this using the different themes of the framework (e.g., Material UI).
Thank you
your HTML is only missing the inclusion of the CSS
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
I am trying to learn to create non modal popup using angularjs that will allow to navigate to other webpage when it is still open and it should not blur the window. I found http://yong2579.github.io/ link.
But window is getting blur
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<title>Tabindex</title>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">
$(function () {
var dialog = new BootstrapDialog({
message: 'Custom tabindex.',
tabindex: 10,
modal: false,
title: 'Modeless draggable dialog',
draggable: true,
animate: false
});
dialog.open();
});
</script>
</body>
</html>
In the context of angular if you are making DOM manipulations (adding or removing elements from the view or modifying their properties) then you should use directives. For bootstrap modals and other interactive bootstrap elements check out the ui-bootstrap module with lots of directives including modal:
https://angular-ui.github.io/bootstrap/#!#modal
Modal's are sort of a special case in angular where it makes the most sense to have a service handle opening/closing modals but the docs there should make it pretty clear how to use if not search here or post a new question with issues.
When using ui-bootstrap you just include the bootstrap.css and ui-bootstrap-tpls.js file (not the bootstrap.js or jquery.js). If you don't include jQuery before angular, angular will load jQuery lite (see docs on angular.element() for details).
I have a node.js application running Express and express handlebars as the templating framework. I have recently started learning Angular and integrating it in my node.js app.
The only issue is, the markup for express-handlebars and angular is same. Both framework use {{}}. I did some research and found this Stackoverflow question: Using Express Handlebars and Angular JS
The accepted answer suggests changing the markup symbols using the interpolateProvider. I implemented this and it does not work for me (I have commented under that answer).
My code looks like this:
main.handlebars
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>GETTING STARTED WITH Angular</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="/css/style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('//');
$interpolateProvider.endSymbol('//');
});
app.controller('DemoController', function() {
this.label = "This binding is brought you by // interpolation symbols.";
});
</script>
</head>
<body>
{{{body}}}
<input ng-model="name">
<h3>Hi, //name// how are you doing</h3>
<div ng-controller="DemoController as demo">
//demo.label//
</div>
</body>
</html>
The above code is from the main.handlebars layout file. I even tried to put that code in the actual view but it did not work. What am I missing?
Thanks.
This issue is occurring because of an incorrect app name reference or a simple typo. Change ng-app="myapp" to ng-app="myApp".
Why does adding AngularJS to a page break it? What can I do to allow it to function correctly? Controls stop rendering. Menus stop expanding.
I am trying to divide the index.html page of an existing Bootstrap theme into partials / templates. Unfortunately, as soon as I move the HTML out of the index.html the controls on that page break.
The theme I am using is KingAdmin v1.3 from WrapBootstrap.com: https://wrapboo...
The only markup I'm adding is...
ng-app="app"
<div ng-include="'shell.html'"></div>
<script src="assets/thirdparty/angular/1.2.26/angular.js"></script>
<script src="assets/app/app.js"></script>
The shell.html contains only the portion of the body that was in the index originally...
WITHOUT ANGULAR:
WITH ANGULAR:
INDEX.HTML:
<head>
<title>Dashboard | KingAdmin - Admin Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="KingAdmin - Bootstrap Admin Dashboard Theme">
<meta name="author" content="The Develovers">
<!-- CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/css/main.css" rel="stylesheet" type="text/css" media="screen">
<!--[if lte IE 9]>
<link href="assets/css/main-ie.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/css/main-ie-part2.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/kingadmin-favicon144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/kingadmin-favicon114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/kingadmin-favicon72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="assets/ico/kingadmin-favicon57x57.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>
<body class="dashboard">
<div ng-include="'shell.html'"></div>
<!-- Javascript -->
<script src="assets/js/jquery/jquery-2.1.0.min.js"></script>
<script src="assets/js/bootstrap/bootstrap.js"></script>
<script src="assets/js/plugins/modernizr/modernizr.js"></script>
<script src="assets/js/plugins/bootstrap-tour/bootstrap-tour.custom.js"></script>
<script src="assets/js/king-common.js"></script>
<script src="assets/js/plugins/stat/jquery.easypiechart.min.js"></script>
<script src="assets/js/plugins/raphael/raphael-2.1.0.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.resize.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.time.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.pie.min.js"></script>
<script src="assets/js/plugins/stat/flot/jquery.flot.tooltip.min.js"></script>
<script src="assets/js/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
<script src="assets/js/plugins/datatable/jquery.dataTables.min.js"></script>
<script src="assets/js/plugins/datatable/dataTables.bootstrap.js"></script>
<script src="assets/js/plugins/jquery-mapael/jquery.mapael.js"></script>
<script src="assets/js/plugins/raphael/maps/usa_states.js"></script>
<script src="assets/js/king-chart-stat.js"></script>
<script src="assets/js/king-table.js"></script>
<script src="assets/js/king-components.js"></script>
<script src="assets/thirdparty/angular/1.2.26/angular.js"></script>
<script src="assets/app/app.js"></script>
</body>
</html>
UPDATE 2014-11-25
I've confirmed this is not me. I had a friend attempt to convert a single page in the template to Angular partials using ng-include tags and setting it up behind a proper Node.JS server. He had the same results. As soon as Angular renders the first page, tons of functionality breaks. the expand/collapse logic everywhere stops working. Most of the controls stop rendering properly.
NOTE
Someone mentioned that the problem might be caused by the use of ng-include tags and partials WITHOUT the partial file having a contoller. The side bar, top bar, breadcrumb are all being included as static HTML / Jade files via an ng-include. A route is passing in the controller for the main body, however the problems exist within this area as well.
Here is a link to the template on the developer's site:
KingAdmin Dashboard Theme
And here is how it currently looks:
Quick look at the modifications from the index.html page:
PARTIALLY RESOLVED:
Not sure if this would be considered a hack. Someone with more knowledge of jQuery and Angular could / should chime in to tell you if this is safe.
STILL UNRESOLVED:
This seems to work while the page is being loaded for the first time. It does NOT work if you navigate away from the page and back again (using the back button, for example). I believe this is happening due to Angular injecting the body and NOT re-rendering the entire page... or the scripts. There's probably something that can be done within each template that uses jQuery (re-init somehow, etc.).
There seem to be tons of questions / examples discussing similar problems with the DOM, jQuery, and using timeouts to correct them:
AngularJS: How can I run a directive after the dom has finished rendering?
The entire fix is in with your common resource scripts, king-common.js, etc.. They each have several rendering functions that appear to be called up front, however the DOM is still being rendered.
Example:
$(document).ready(function(){
$('.main-menu .js-sub-menu-toggle').click( function(e){
[snip]
$li.find('.sub-menu').slideToggle(300);
});
By wrapping each of these operations in a setTimout you postpone rendering until after the DOM is modified:
$(document).ready(function(){
setTimeout(function(){
$('.main-menu .js-sub-menu-toggle').click( function(e){
[snip]
$li.find('.sub-menu').slideToggle(300);
},1000);
);
These have been moved to the tail end of your scripts.jade / scripts.html file. This was done initially as an attempt to delay the firing of these methods, so this might be unnecessary. Still, that's part of how we arrived at a functioning template.
Your problem is Bootstrap is not watching for the newly created elements on your page that angular compiles for you. You can create directives that can call the the Bootstrap jQuery method that add the Bootstrap bindings to your element, such as ($('.dropdown').dropdown()).
There is a wonderful AngularJS library that replaces that is an angular agnostic rewrite of bootstrap.js that may fix this for you: http://angular-ui.github.io/bootstrap/
For a quick hack, if you want all your elements with the .dropdown class to use Bootstrap dropdown, you would create a directive like this.
angular.module('app')
// Directives: https://docs.angularjs.org/guide/directive
.directive('dropdown', [
// Use window dependency
'$window',
// Returns a directive
function ($window) {
return {
// Restrict to attribute, or class name so can be used like so:
//
// <a class="dropdown btn btn-primary">Dropdown button</a>
// or
// <a dropdown class="btn btn-primary">Dropdown button</a>
restrict: 'AC',
link: {
post: [
// This dependency gives you the element with
// the directive wrapped as a jQuery object
'$element',
function ($element) {
$element.dropdown();
}
]
}
};
})
I think you should reconsider your dependencies. The elements broken in your UI seems to require jquery, for instance: jquery.easypiechart.min.js
At https://docs.angularjs.org/misc/faq you can read:
Does Angular use the jQuery library? Yes, Angular can use jQuery if
it's present in your app when the application is being bootstrapped.
If jQuery is not present in your script path, Angular falls back to
its own implementation of the subset of jQuery that we call jQLite.
Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer
might work correctly with Angular but we don't guarantee that.
Notice that angular requires jQuery 2.1 or above, whilst Bootstrap require the latest 1.1.x version of jQuery (Bootstrap does not support jQuery 2+ due to jQuery 2 does not support IE8).
After reading the above you should also read:
Does one need jQuery when using Twitter Bootstrap with Angular.js?
https://github.com/angular-ui/bootstrap/issues/2765
I am very new to using sencha. I have simple application and I want to add debug js library to see errors and warning. Problem is when I add this js to my app I see just blank screen and errors in this library. My index.html look like:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Account Manager</title>
<script
src="http://cdn.sencha.com/ext/gpl/4.2.0/examples/shared/include-ext.js"></script>
<script
src="http://cdn.sencha.com/ext/gpl/4.2.0/examples/shared/options-toolbar.js"></script>
<script src="../../api-debug.js"></script>
<script src="app.js"></script>
<script src="ext-all-debug.js"></script>
</head>
<body></body>
</html>
when I remove ext-all-debug.js everything works.
So what I am doing wrong ?
You have added ExtJs twice. You don't need to add the JS file from their examples. You need to add ext-all-debug.js and the css file. Mine looks something like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all-debug.css"/>
<script src="ext-all-debug.js"></script>
<script src="app.js"></script>
</head>
<body></body>
</html>
You might also want to have a look at the Sencha CMD that can create the setup for you:
sencha -sdk /path/to/sdk generate app
More info here: http://docs.sencha.com/extjs/4.2.0/#!/guide/command
To use dynamic loading of classes add this to your code:
Ext.Loader.setConfig({
enabled : true,
paths : {
Ext : "ext/src" //path to ext
//add custom/yourown namespaces here and their paths
}
});
And replace ext-all-debug.js with ext.js or ext-dev.js
<script src="../common/js/Ext/ext-dev.js" type="text/javascript"></script>
Use require in your code to let the loader know which classes to use:
Ext.require("Ext.form.Panel);