Angular use ng-include to include a template that include others - javascript

i'm trying in my app to include a template (already shown) that include other template.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tasks Overview</title>
<!-- Angular framework -->
<script src="assets/js/angular.min.js"></script>
<!-- Main module -->
<script src="app.js"></script>
<!-- Components -->
<!-- Services -->
<script src="app/components/logger/logger-service.js"></script>
<script src="app/components/resource/resource-service.js"></script>
<script src="app/components/integrity_check/integrity_check-service.js"></script>
<script src="app/components/date_utilities/month_translation_utility-service.js"></script>
<!-- History -->
<script src="app/components/history/history-controller.js"></script>
<!-- Period -->
<script src="app/components/period/period-controller.js"></script>
<script src="app/components/period/directives/year_picker/year_picker-directive.js"></script>
<script src="app/components/period/directives/month_picker/month_picker-directive.js"></script>
<!-- Shell -->
<script src="app/components/shell/shell-controller.js"></script>
<!-- Calendar -->
<script src="app/components/calendar/directives/day/day-directive.js"></script>
<script src="app/components/calendar/calendar-controller.js"></script>
<!-- UI libraries -->
<link rel="stylesheet" type="text/css" href="assets/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/system.css">
<script src="assets/js/jquery-3.1.0.min.js"></script>
<script src="assets/js/materialize.min.js"></script>
<!-- Task entities -->
<script src="app/components/task/task-controller.js"></script>
<script src="app/components/task/tasks-service.js"></script>
<!-- Main -->
<script src="app/components/main/main-controller.js"></script>
<!-- Google material icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- External libraries -->
<script src="assets/js/FileSystem.js"></script>
</head>
<body ng-app="wtd">
<!--History component-->
<div id="history" ng-include="'app/components/history/history_main-view.html'" ng-controller="historyController as vm"></div>
<!--Period component-->
<div id="period" ng-include="'app/components/period/period_main-view.html'" ng-controller="periodController as vm"></div>
<!--Calendar component-->
<div id="calendar" ng-include="'app/components/calendar/calendar_main-view.html'" ng-controller="calendarController as vm"></div>
<!--Shell component-->
<div id="shell" ng-include="'app/components/shell/shell_main-view.html'" ng-controller="shellController as vm"></div>
<!--Main controller-->
<div id="main" ng-controller="mainController"></div>
</body>
</html>
calendar_main-view.html
<div class="col l10 offset-l1 m10 offset-m1 s10 offset-s1">
<!-- List view mode -->
<div ng-if="view.mode.list" ng-include="app/components/calendar/calendar_list-view.html">
</div>
<!-- Grid view mode -->
<div ng-if="view.mode.grid" ng-include="app/components/calendar/calendar_grid-view.html"></div>
</div>
Problem appear on the second level of ng-include (file calendar_grid-view.html). No one xhr call is done by browser to include the file.
What's wrong?

You are missing single quote.
<div ng-if="view.mode.list" ng-include="'app/components/calendar/calendar_list-view.html'">
<div ng-if="view.mode.grid" ng-include="'app/components/calendar/calendar_grid-view.html'"></div>
Make sure view.mode.list and view.mode.grid evaluted to truthy in order to display html.

Related

getting " Type Error : $(...).autocomplete is not a function" error using jQuery UI

I'm locked into a jQuery ui issue. I have done a form that I need to autocomplete all the field based on client id. It is like if I'm typing the id of an existing client, all the fields should be autofill with all that's client values from database table like fisrtname , last name, address, date-of-birth, but for the first i'm just trying to test if jquery Ui is working and I got the "$(...).autocomplete is not a function" error in console. It is not from Jquery because I have done also a notification system and i dysplay all notification with Jquery and it is working , I think That it's from jQuery UI. I have tried all possible solutions that I found with no success. Thank's in advance ! Good day to everybody! :)
This is My layouts.app
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="userId" content="{{Auth::check() ? Auth::user()->id : '' }}">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{asset('jqueryui/jquery-ui.min.js')}}" type="text/javascript"></script>
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]); !!}
</script>
<!-- Fonts -->
{{-- <link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> --}}
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="{{asset('jqueryui/jquery-ui.min.css')}}">
<link rel="icon" type="image/png" sizes="16x16" href="{{asset('assets/images/favicon.png')}}">
<title>S.C. Amanet Stefany IFN S.R.L.</title>
<!-- Bootstrap Core CSS -->
<link href="{{asset('assets/plugins/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
<!-- morris CSS -->
<link href="{{asset('assets/plugins/morrisjs/morris.css')}}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{asset('css/style.css')}}" rel="stylesheet">
<!-- You can change the theme colors from here -->
<link href="{{asset('css/colors/blue.css')}}" id="theme" rel="stylesheet">
{{-- <link href="{{ asset('css/app.css') }}" rel="stylesheet"> --}}
</head>
<body>
.... this is my content ....
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/app.js') }}"></script>
{{-- <script src="{{asset('assets/plugins/jquery/jquery.min.js')}}"></script> --}}
{{-- <script src="{{asset('js/jquery.js')}}"></script> --}}
<!-- Bootstrap tether Core JavaScript -->
<script src="{{asset('assets/plugins/bootstrap/js/popper.min.js')}}"></script>
<script src="{{asset('assets/plugins/bootstrap/js/bootstrap.min.js')}}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{{asset('js/jquery.slimscroll.js')}}"></script>
<!--Wave Effects -->
<script src="{{asset('js/waves.js')}}"></script>
<!--Menu sidebar -->
<script src="{{asset('js/sidebarmenu.js')}}"></script>
<!--stickey kit -->
<script src="{{asset('assets/plugins/sticky-kit-master/dist/sticky-kit.min.js')}}"></script>
<!--Custom JavaScript -->
{{-- <script src="{{asset('js/custom.js')}}"></script> --}}
<script src="{{asset('js/custom.min.js')}}"></script>
{{-- <script src="{{asset('js/jquery-ui.js')}}"></script> --}}
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--sparkline JavaScript -->
<script src="{{asset('assets/plugins/sparkline/jquery.sparkline.min.js')}}"></script>
<!--morris JavaScript -->
<script src="{{asset('assets/plugins/raphael/raphael-min.js')}}"></script>
<script src="{{asset('assets/plugins/morrisjs/morris.min.js')}}"></script>
<!-- Chart JS -->
<script src="{{asset('js/dashboard1.js')}}"></script>
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="{{asset('assets/plugins/styleswitcher/jQuery.style.switcher.js')}}"></script>
</body>
</html>
This is my view with that form
<div class="form-group row ml-1 mb-1">
<label for="example-text-input" class="col-3 col-form-label pt-0" style="min-width: 80px;">Serie B.I./C.I.:</label>
<div class="col-3 pl-0">
<input class="form-control input-height pl-1 pr-1" name="serie" type="text" value="" id="">
</div>
<div class="col-4 pl-0">
<input class="form-control input-height pl-1 pr-1" name="nr_id" type="text" value="" id="cltId" > //this #cltId ----------
</div>
</div>
And this is my resource/js/app.js with the jQuery code that I need
$(document).ready(function(){
$("#cltId").autocomplete({
source: [
'Apple',
'Banana',
'Orange',
]
});
});
Any suggestion ? Have I added something that I shouldn't ? Have I write the code in wrong way ? I can not find the mistake ,any answer will help me lot.
Finally solved, I have moved all the jQuery code in app.js, I have run the command
npm install jquery-ui --save-dev
and I imported it in app.js like :
import $ from 'jquery';
window.$ = window.jQuery = $;
import 'jquery-ui/ui/widgets/autocomplete.js';
IMPORTANT ! note that the autocomplete.js from the ends is work for me because is the widget that I want to use , find out what widget you want and import it there after importing jquery :
Import 'jquery-ui/widgets/here is the widget that you want .js'
But before look to not import jquery anywhere else like layouts or any other js files like bootstrap.js for example.

How to get this code working in angular with wowslider.js?

I've tried many times to run this code but every time it appears incorrectly I want angular to make its affect like this demo:
http://wowslider.com/angular-slider-collage-demo.html.
Please help, I've tried too many times without the intended result.
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Http://wowslider.net/</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Made with WOW Slider - Create beautiful, responsive image sliders in a few clicks. Awesome skins and animations. Http://wowslider.net/" />
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#d7d7d7;margin:0" >
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container1" >
<div class="ws_images" ng-controller="HelloController">
<ul>
<li ng-repeat="img in allimages"><img ng-src="data1/images/{{img.name}}" alt="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132" title="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132" id="wows1_0"/></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a ng-repeat="img in allimages" href="#" title="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132"><span><img ng-src="data1/tooltips/{{img.name}}" alt="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132"/>1</span></a>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">http://wowslider.net/ by WOWSlider.com v8.7</div>
<div class="ws_shadow"></div>
</div>
<!-- End WOWSlider.com BODY section -->
<script type="text/javascript" src="engine1/angular.js"></script>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.allimages = [{name:'2016chevroletcruzespiedcompletelyuncoverednewscaranddriverphoto658949s217x132.jpg'},{name:'2016chrysler300srtspieditsalivenewscaranddriverphoto658864s217x132.jpg'}];
});
</script>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
</body>
</html>

jQuery mobile doesn't trigger pageshow code between pages

I am writing a jQuery mobile app that contains two HTML pages. When user navigates from index.html page to search.html page, jQuery should load elements into search.html page.
However, things seems to gone wrong. The script doesn't work as expected.
index.html
<!DOCTYPE html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" ></link>
<link rel="stylesheet" href="css/mahidol.min.css"></link>
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css"></link>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Cordova sh*ts -->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parameterHandler.js"></script>
<script src="js/default.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
Preferences
<h1><img src="logo.png" height="15px"> Contact</h1>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
Search from name
<input id="filterBoxList" data-type="search" placeholder="Type here to search from department list">
</form>
<ul data-role="listview" data-filter="true" data-input="#filterBoxList" id="list_dept">
</ul>
</div>
</div>
</body>
search.html
<!DOCTYPE html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta charset="utf-8"></meta>
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" ></link>
<link rel="stylesheet" href="css/mahidol.min.css"></link>
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css"></link>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Cordova shits -->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parameterHandler.js"></script>
<script src="js/default.js"></script>
<style>
#listie small{
color: #ccc !important;
}
</style>
</head>
<body>
<div data-role="page" id="search">
<div data-role="header" data-position="fixed">
Preferences
<h1><img src="logo.png" height="15px"> Contact</h1>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
Search from dept. list
<input id="filterBoxName" data-type="search" placeholder="Type here to search from name">
</form>
<ul data-role="listview" data-filter="true" data-input="#filterBoxName" id="listie">
</ul>
</div>
</div>
</body>
default.js (loaded the last)
$(document).on("pageshow","search.html",function(){
var chx = 0;
var m="";
var k=[];
$.mobile.loading( "show", {
text: 'Loading',
textVisible: true
});
if(loaded == false) // This will prevent event triggering more then once
{
for (var t in JSON.parse(localStorage.getItem('hr')))
{
m += "<li><a href='#view?id=" + t + "'>" + JSON.parse(localStorage.getItem('hr'))[t].Name + " <small>" + JSON.parse(localStorage.getItem('hr'))[t].Surname + "</small></a></li>";
}
$('#listie').append(m).listview('refresh');
loaded = true;
}
$.mobile.loading( "hide" );
});
Things seems to be nice when the "search" page div is placed inside index.html (and the code is linked in single page, not two). However it does break when I tried splitting up the files into two files.
Anything I can do to fix this?
Well, solved...
Even though the div is on the same file, when using $(document).on("pageshow",src,function(){...}); to point to src, makes sure that src points to the div ID, not the file itself.
In this case, it's $(document).on("pageshow","#search",function(){...});.

Polymer website takes 5 seconds to load

My little Polymer 1.0 Starter Kit app takes 5 seconds to load. The site also uses Page.js.
I am following this tutorial on how to speed up your polymer app. But I'm on the video section.
I've used loadCSS in my app and the set up:
<head>
<script src="scripts/loadCSS.js"></script>
<script src="scripts/onloadCSS.js"></script>
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- endbuild -->
<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<!-- endreplace-->
</head>
<body>
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<paper-header-panel main mode="waterfall">
<paper-toolbar>
//web links etc
</paper-toolbar>
// Main Content
<div class="content" style="display:none">
<script>
onloadCSS(loadCSS('styles/main.css'), function() {
document.querySelector('.content')
.style.display = ''; // should show the content after css is loaded?
});
</script>
<noscript><link rel="stylesheet" href="/styles/main.css"></noscript>
<noscript><link rel="stylesheet" href="/styles/skeleton.css"></noscript>
<iron-pages attr-for-selected="data-route" selected="{{route}}">
// all the elements ie: <my-app></my-app>
</iron-papes>
</div>
</paper-header-panel>
</template>
</body>
Only the <paper-toolbar> loads and nothing else. Why .style.display = ''; does not work?
Thanks

I can't get my app to respond when on moblie device, works fine on PC, even in mobile Test mode on PC [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I am working on a Web App using Angular, Bootstrap, and templated off of Ace Admin (Responsiveness template). On the PC, in Chrome and FireFox everything works fine. When we shrink the window or use the Responsive Design Review the sidebar navigation changes to a menu button and works appropriately. However when we bring the site up on a table or phone (Chrome or Firefox browswers), the menu button is visible, but doesn't respond. Any ideas? Here is my opening HTML page, the only thing I have left off is the javascript for my app. The rest is here.
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/favicon.ico">
<title>DISCUS Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="resources/ace/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/ace/assets/css/font-awesome.min.css">
<!-- page specific plugin styles -->
<link rel="stylesheet" href="resources/ace/assets/css/jquery-ui.min.css">
<link rel="stylesheet" href="resources/ace/assets/css/datepicker.css">
<link rel="stylesheet" href="resources/ace/assets/css/ui.jqgrid.css">
<!-- text fonts -->
<link rel="stylesheet" href="resources/ace/assets/css/ace-fonts.css">
<!-- ace styles -->
<link rel="stylesheet" href="resources/ace/assets/css/ace.min.css" id="main-ace-style">
<!-- ngModal styles -->
<link rel="stylesheet" href="resources/ng-modal/ng-modal.css">
<!-- TEST DRIVE STYLES (Determine to keep or throw away) -->
<link rel="stylesheet" href="resources/ng-grid/ng-grid.css">
<!-- DSC styles -->
<link rel="stylesheet" href="styles/ng-style.css">
<!--[if lte IE 9]>
<link rel="stylesheet" href="resources/ace/assets/css/ace-part2.min.css">
<![endif]-->
<link rel="stylesheet" href="resources/ace/assets/css/ace-skins.min.css">
<link rel="stylesheet" href="resources/ace/assets/css/ace-rtl.min.css">
<!--[if lte IE 9]>
<link rel="stylesheet" href="resources/ace/assets/css/ace-ie.min.css">
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="resources/ace/assets/js/ace-extra.min.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="resources/ace/assets/js/html5shiv.min.js"></script>
<script src="resources/ace/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<!--<body class="no-skin">-->
<body class="skin-1" data-ng-controller="MainController">
<ng-include src="'views/navbar.html'"></ng-include>
<div class="main-container" id="main-container">
<div id="sidebar" class="sidebar responsive" data-ng-show="user">
<script type="text/javascript">
try {
ace.settings.check('sidebar', 'fixed')
}
catch (e) {
}
</script>
<div class="sidebar-shortcuts" id="sidebar-shortcuts">
<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
<button class="btn btn-success">
<i class="ace-icon fa fa-signal"></i>
</button>
<button class="btn btn-info">
<i class="ace-icon fa fa-pencil"></i>
</button>
<!-- #section:basics/sidebar.layout.shortcuts -->
<button class="btn btn-warning">
<i class="ace-icon fa fa-users"></i>
</button>
<button class="btn btn-danger">
<i class="ace-icon fa fa-cogs"></i>
</button>
<!-- /section:basics/sidebar.layout.shortcuts -->
</div>
<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
<span class="btn btn-success"></span>
<span class="btn btn-info"></span>
<span class="btn btn-warning"></span>
<span class="btn btn-danger"></span>
</div>
</div>
<!-- /.sidebar-shortcuts -->
<div ng-include src="'views/sidebar.html'"></div>
<!-- #section:basics/sidebar.layout.minimize -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left"
data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
<!-- /section:basics/sidebar.layout.minimize -->
<script type="text/javascript">
try {
ace.settings.check('sidebar', 'collapsed')
}
catch (e) {
}
</script>
</div>
<div class="main-content">
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div ng-view></div>
<!-- PAGE CONTENT ENDS -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.page-content -->
</div>
</div>
<!-- basic scripts -->
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='resources/ace/assets/js/jquery.min.js'>" + "<" + "/script>");
</script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='resources/ace/assets/js/jquery1x.min.js'>" + "<" + "/script>");
</script>
<![endif]-->
<script type="text/javascript">
if ('ontouchstart' in document.documentElement) document.write("<script src='resources/ace/assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<!-- page specific plugin scripts -->
<!-- ace scripts -->
<script src="resources/ace/assets/js/ace.min.js"></script>
<script src="resources/ace/assets/js/ace-elements.min.js"></script>
<!-- inline scripts related to this page -->
<!-- the following scripts are used in demo only for onpage help and you don't need them -->
<link rel="stylesheet" href="resources/ace/assets/css/ace.onpage-help.css"/>
<link rel="stylesheet" href="resources/ace/docs/assets/js/themes/sunburst.css"/>
<script type="text/javascript"> ace.vars['base'] = '..'; </script>
<script type="text/javascript" src="resources/ace/assets/js/ace/elements.onpage-help.js"></script>
<script type="text/javascript" src="resources/ace/assets/js/ace/ace.onpage-help.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/rainbow.js"></script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/generic.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/html.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/css.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/javascript.js"></script>
<!--<script type="text/javascript" src="resources/ace/assets/js/jquery.min.js"></script>-->
<script type="text/javascript" src="resources/ace/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="resources/angular/angular.js"></script>
<script type="text/javascript" src="resources/angular/angular-route.js"></script>
<script type="text/javascript" src="resources/angular/xeditable.js"></script>
<script type="text/javascript" src="resources/angular/angular-local-storage.js"> </script>
<script type="text/javascript" src="resources/angular/angular-resource.js"></script>
<script type="text/javascript" src="resources/angular/angular-sanitize.js"></script>
<script type="text/javascript" src="resources/angular/angular-translate.js"></script>
<script type="text/javascript" src="resources/angular/angular-touch.js"></script>
<script type="text/javascript" src="resources/angular/angular-animate.js"></script>
<script type="text/javascript" src="resources/Smart-Table.debug.js"></script>
<script type="text/javascript" src="resources/ui-bootstrap-tpls-0.11.0.min.js"> </script>
<script type="text/javascript" src="resources/ng-modal/ng-modal.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/lodash.min.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/highlight.min.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/angular-highlightjs.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/angularjs-dropdown-multiselect.js"></script>
<script type="text/javascript" src="resources/pdfjs-mod/pdf.js"></script>
<script type="text/javascript" src="resources/directives/angular-pdf.js"></script>
<script type="text/javascript" src="resources/directives/partials-css.js"></script>
<script type="text/javascript" src="resources/ui-layout/ui-layout.js"></script>
<script type="text/javascript" src="resources/ui-grid/ui-grid.js"></script>
<!-- The following are for exporting from ui-grid -->
<script type="text/javascript" src="resources/ui-grid/csv.js"></script>
<script type="text/javascript" src="resources/ui-grid/pdfmake.js"></script>
<script type="text/javascript" src="resources/ui-grid/vfs_fonts.js"></script>
<!-- TEST DRIVE SCRIPTS (Determine to keep or throw away) -->
<script type="text/javascript" src="resources/ng-grid/ng-grid-2.0.11.debug.js"></script>
<!-- DISCUS-NG Angular JavaScript -->
Most mobile browsers wait about 300ms after a tap-and-release before sending the click event.
Using the ngTouch module, which provides an ngClick replacement might solve this for you:
https://code.angularjs.org/1.2.25/docs/api/ngTouch/directive/ngClick
In searching Stack Overflow I found a somewhat related issue and did some trial and error. My issue turned out to be a conflict between Angular and the Ace Admin template. I ended up moving two Ace JavaScript calls to after the Angular calls (ace.min.js and ace-elements.min.js) and suddenly the toggled menu button works on PC and mobile device in both Firefox and Chrome.

Categories