ng-controller doesn't work for kendo tabstrip tab content. Please check my code below.
<!--tabstripCtrl.js-->
angular.module('tabstripApp',[]);
var app = angular.module('tabstripApp');
app.controller('tabCtrl',['$scope',function($scope){
$('#tabstrip').kendoTabStrip({
contentUrls:[
'views/gridview1.html',
'views/gridview2.html',
'views/gridview3.html',
]
});
}]);
<!--grid1Ctrl.js-->
var app = angular.module('tabstripApp');
app.controller('grid1Ctrl',['$scope',function($scope){
$scope.grid1 = "grid1";
}]);
<!--index.html-->
<html>
<head>
<link rel="stylesheet" href="css/kendo.common.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="controllers/tabstripCtrl.js"></script>
<script src="controllers/gridCtrl.js"></script>
</head>
<body ng-app="tabstripApp" ng-controller='tabCtrl'>
<div id='tabstrip'>
<ul>
<li class="k-state-active">grid1</li>
<li>grid2</li>
<li>grid3</li>
</ul>
<div ng-controller="grid1Ctrl"></div>
<div ng-controller="grid2Ctrl"></div>
<div ng-controller="grid3Ctrl"></div>
</div>
</body>
</html>
<!--gridview1.html-->
<div>
<span>{{grid1}}</span>
</div>
Since each tab content is very complex, so I create separate html file to maintan them. But, the grid1Ctrl, grid2Ctrl and grid3Ctrl binding don't work, any ideas?
<div ng-controller="myController">
<div id="tabstrip" kendo-tab-strip="tabstrip">
<ul>
<li class="k-state-active">grid1</li>
<li>grid2</li>
<li>grid3</li>
</ul>
<div ng-controller="grid1Ctrl">
{{grid1}}
</div>
<div ng-controller="grid2Ctrl">
{{grid2}}
</div>
</div>
</div>
DEMO
Related
I am able to get the Angular Controller working on the index.html page, but its not loading on any of the other pages.
My index page is :
<!DOCTYPE html>
<html ng-app="myPhonegapApp">
<head>
<script src="js/angular.min.js"></script>
<script src="js/my-angscript.js"></script>
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
My Page1 <br>
My Page2 <br>
<div ng-controller="myAngController">
<p>The name is : {{name}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>
I linked mypage1.html from the index page and the code for mypage1.html is exactly same as index.html and only this part is changed: <div data-page="mypage1" class="page">
Now the my-angscript.js is:
var app = angular.module("myPhonegapApp", []);
app.controller("myAngController", function($scope){
$scope.name = "Johnny Doe";
});
The code works fine on the index page. But when I go to mypage1.html, it does not work. It only shows {{name}}. What am I doing wrong?
PhoneGap : v6.4.3
AngularJS: v1.6.1
Has anyone tried html jquery load file? How can I possibly use Jquery to control a class from a Html that's loaded from Jquery? A direct content of my header html will work if inserted into index.html. However I'm trying to use the Jquery include file as there will be a lot of pages so a separate file is much more feasible. The problem is when I target a certain class or id in js it won't do anything.
index.html
<!DOCTYPE html>
<html>
<body>
<div id="header"></div>
<div id="slides">
<ul class="slides-container">
<li>
<img src="img/site_images/bg_home01.jpg" alt="">
<div class="caption">
<div class="title_pre">Development</div>
<h1>The City Below<br>The life above</h1>
<p><a><i class="icon-play"></i>Play Video</a></p>
</div>
</li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/jquery.superslides.js" type="text/javascript" charset="utf-8"> </script>
<script src="js/app.js"></script>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
</body>
</html>
header.html
<header>
Menu
<div class="navlogo">
<img src="http://placehold.it/150x40">
</div>
</header>
app.js
$(document).foundation();
$(".navlogo").fadeOut();
Managed to fix with a different approach.
index.html
<!DOCTYPE html>
<html>
<link rel="import" id="template-file" href="header.html">
<body>
<script>
var getImport = document.querySelector('#template-file');
var getContent = getImport.import.querySelector('#header');
document.body.appendChild(document.importNode(getContent, true));
</script>
<div id="slides">
<ul class="slides-container">
<li>
<img src="img/site_images/bg_home01.jpg" alt="">
<div class="caption">
<div class="title_pre">Development</div>
<h1>The City Below<br>The life above</h1>
<p><a><i class="icon-play"></i>Play Video</a></p>
</div>
</li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/app.js"></script>
</body>
</html>
header.html
<header id="header">
Menu
<div class="navlogo">
<img src="http://placehold.it/150x40">
</div>
</header>
app.js
$(document).foundation();
$(".navlogo").fadeOut();
i'm working on a project using cordova / eclipse / kendo ui and i'm going through a weird behave ...
i developed a sample of test to show you ..
when i try to run that sample on google chrome, it does work, but once compiled and running on my phone (which is a nexus 4 by the way even if it doesnt really matter i think ..) it doesnt work...
in this example, we have something simple, a menu with three items and a view which differs depends on what button you click on.
on google chrome, it works, i mean when i click on the first button, it shows "first", same for second and so on ..
when i compile the project with eclipse and run it on my phone, the message is the same whatever the button i clicked on ..
here is my sample of code :
html :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/index.css" rel="stylesheet" />
<!-- Librairies -->
<script src="lib/jquery.min.js"></script>
<script src="lib/kendo.all.min.js"></script>
<!-- Fonction d'init -->
<script src="init/cordovaInit.js"></script>
<!-- Controleurs -->
<script src="controlers/panelControler.js"></script>
<!-- EndScript -->
</head>
<body onload="onBodyLoad()">
<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="search">
<div id="search">
<div id="first">
<p>first</p>
</div>
<div id="second">
<p>second</p>
</div>
<div id="third">
<p>third</p>
</div>
</div>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home']">
<ul data-role="listview" data-type="group">
<li>Menu
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</li>
</ul>
</div>
<div data-role="layout" data-id="drawer-layout" data-layout="overview-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span>Test</span>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
panelControler('first');
</script>
</body>
</html>
here is the very simple javascript i'm using to test :
function panelControler(action){
alert("panelControler");
if (action === 'first'){
alert("first show");
$("#first").show();
$("#second").hide();
$("#third").hide();
}
else if (action === 'second'){
alert("second show");
$("#second").show();
$("#first").hide();
$("#third").hide();
}
else if (action === 'third'){
alert("third show");
$("#third").show();
$("#second").hide();
$("#first").hide();
}
}
Check the second Q/A pair from the Kendo UI Mobile FAQ.
I'm quite stuck and I don't know where I'm going wrong. I'm using the Inspiritas Bootstrap theme, and I wanted to use it in an Ember.js app.
I've been trying to read up, I can't seem to figure out what's going wrong - debugging didn't really help :(
My files are as follows:
app.js
app = Ember.Application.create();
app.IndexController = Ember.Controller.extend({
name : "Hassan Khan"
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>app</title>
<link href="inspiritas.css" rel="stylesheet">
</head>
<body>
<script src='../components/jquery/jquery.js'></script>
<script src="../js/jquery.tablesorter.js"></script>
<script src="../components/moment/moment.js"></script>
<script src="../components/highcharts.com/js/highcharts.src.js"></script>
<script src="../components/handlebars/handlebars.js"></script>
<script src="../components/bootstrap/js/bootstrap-dropdown.js"></script>
<script src="../components/bootstrap/js/bootstrap-collapse.js"></script>
<script src="../components/bootstrap/js/bootstrap-typeahead.js"></script>
<script src="../components/ember/ember.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Now I'm not quite sure where the application bit should go, but here it is:
application.html
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">app</a>
<span class="tagline">Blah</span>
<div class="nav-collapse collapse" id="main-menu">
<div class="auth pull-right">
<img class="avatar" src="images/img.png">
<span class="name">{{ name }}</span><br/>
<span class="links">
Settings
Logout
</span>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row-fluid">
<div class="span9" id="content-wrapper">
<div id="content">
{{ outlet }}
</div>
</div>
</div>
</div>
application.html needs to be compiled by Ember.Handlebars. If you put its content between <script type="text/x-handlebars"> and </script> and place in the head or the body of your page, it will be automagically compiled and rendered for you.
It is also good practice to name your application variable App.
Your name should by moved to an App.ApplicationController if you want it to be rendered.
http://emberjs.com/guides would be a good starting point for creating an Ember Application. The new video from Tom Dale will definitely help you.
http://jsbin.com/aqokix/1
I'm no javascript ninja, but i'd like to incorporate this library in a site targeting tablets. Here is the library :
jPanelMenu
Here is my redered html:
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<ul id="menu">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
All i see in the browser is a normal UL bulleted list. No Js errors in chromes dev tools. Anyone ever use this plugin or know what im doing wrong?
Thanks!
EDIT:
Here is updated code with solution from dbaseman
<html>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script>
<header class="main">
<div class="menu-trigger">Click Me</div>
<ul id="menu" style="display: none;">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</header>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index.Tablet</title>
</head>
<body>
<div>
tablet home
</div>
</body>
</html>
</body>
</html>
You need to add a "trigger" element to enable the menu (it looks for .menu-trigger by default):
<div class="menu-trigger">Click me to trigger</div>
(Also, apparently it expects the menu element to be hidden initially, so use <ul style="display: none;" ...>.)
Demo
You need to change trigger to anchor tag
<a class="menu-trigger" href="#menu">Click Me</div>
You can see it in the Jpanelmenu webpage source.