AngularJS function unable to be called in ng-view - html

Using the following code, I am successfully able to use this angularjs carousel.
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
var app = angular.module('app', ['ui.bootstrap']);
app.controller('CarouselDemoCtrl', CarouselDemoCtrl);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.noWrapSlides = false;
$scope.activeSlide = 0;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
}
</script>
</head>
<body>
<div>
Write your name here <input type="text" ng-model="name">
Hi {{name}} Those are your photos:
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<uib-carousel interval="myInterval" active="activeSlide">
<uib-slide ng-repeat="slide in slides" index="$index">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
</div>
</body>
</html>
However, when I divide the content up into a subsequent app.js and then serve it as an html snippet including the carousel using ng-view as follows, it then doesn't work.
<body ng-app="app">
<div ng-include='"./templates/header.html"'></div>
<div ng-view></div>
<div ng-include='"./templates/footer.html"'></div>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/app.js"></script>
</body>
It seems it's not able to refer to the function? I get the following console error
angular.js:13708 Error: [ng:areq] Argument 'CarouselDemoCtrl' is not a function, got undefined
Any help would be greatly appreciated! I got the code for the carouseldemo from https://codepen.io/Fabiano/pen/LACzk

Related

could route to different templates in angular

Below is a HTML page, Couldn't get content when click on page 1
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
<div class="Container">
<nav class="navbar navbar-default">
<ul class="navbar navbar-nav">
<li>
Page 1
Page 2
Page 3
</li>
</ul>
</nav>
</div>
<div ng-view></div>
<script>
var app = angular.module("myapp", ["ngRoute"]);
app.config(function ($routeProvider){
$routeProvider.when("/page1", {
template : <h1>Page 1</h1>
})
.when("/page2", {
template: <h1>Page 2</h1>
})
.otherwise({
template: <h1>note found</h1>
})
});
</script>
</body>
</html>
Is there any mistake in above code. Is issue with reference.
Can someone please correct it?
Page 3 will not show anything.
The first mistake you missed around quotes for templates in javascript code:
$routeProvider.when('/page1', {
template : '<h1>Page 1</h1>'
})
.when("/page2", {
template: '<h1>Page 2</h1>'
})
.otherwise({
template: '<h1>note found</h1>'
});
And no need to use a exclamation mark in links:
Page 1
Page 2
Page 3
You can use redirectTo() method with otherwise() method. Also, have to put href="#" under <a> tag.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app="myApp">
<p>Main</p>
Red
Green
Oranger
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.otherwise({redirectTo:'/'});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
There are a couple of mistakes: First, in the href, you have used capital P whereas in route definition it's small letter i.e p, 2nd you do not need to use ! in the href i.e it should be like href=#page1 and the 3rd one is template should be as string i.e under single/double quote.
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
<div class="Container">
<nav class="navbar navbar-default">
<ul class="navbar navbar-nav">
<li>
Page 1
Page 2
Page 3
</li>
</ul>
</nav>
</div>
<div ng-view></div>
<script>
var app = angular.module("myapp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider.when("/page1", {
template: '<h1>Page 1</h1>'
})
.when("/page2", {
template: '<h1>Page 2</h1>'
})
.otherwise({
template: '<h1> note found </h1>'
})
});
</script>
</body>
</html>

Date picker not coming inside of ng repeat in AngularJS

Am binding islamic date as date picker to text box , but when writing that inside of ng repeat its not working
my code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="Scripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>
<link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet" />
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<table>
<tr ng-repeat="r in rvm">
<td>
<input type="text" id="txtHijriDate" ng-model="r.Date" />
</td>
</tr>
</table>
</div>
</body>
</html>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', function ($scope) {
$scope.rvm = [];
$('#txtHijriDate').calendarsPicker({
calendar: $.calendars.instance('islamic'),
});
});
</script>
if i remove `ng-repeat="r in rvm" it is working but i want that date picker in ng repeat
Your code puts 1 (and only 1) calendar on the element with ID txtHijriDate
When you use ng-repeat, you create multiple elements with the same ID
You need to add
$('#txtHijriDate').calendarsPicker({
calendar: $.calendars.instance('islamic'),
});
Code in your JavaScript at every creation of element. And I’ll suggest to map “id” also to have ID dependent on your elements.
Error: Calendar binding code is executing before controls(input box) load inside ng-repeat.
Solution: Use ng-bind directive to bind calendar on controls.
See the working demo below:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>
<link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet" />
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<table>
<tr ng-repeat="i in [1, 2,3,4,5] track by $index">
<td>
<input type="text" ng-
ng-bind="bindDate('calendar-control'+$index)" id="calendar-control{{$index}}"
model="rvm[1].Date" />
</td>
</tr>
</table>
</div>
</body>
</html>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', function ($scope) {
$scope.rvm = [];
$scope.bindDate=function(id){
$('#'+id).calendarsPicker({
calendar: $.calendars.instance('islamic'),
});
}
});
</script>

Show variable content in bootstrap tooltip

I want to show the variable state in tooltip of bootstrap, but its not getting the variable content its shows the variable name "Pump 2 {{pumpStatus2.helpText}}", and it should appear "Pump 2 On/Off" according the variable content, it works with the title when I mouse over the image.
<img class="pump" id="pump2" title="Pump 2 {{Status2.helpText}}"
ng-src="img/{{Status2.status}}" data-toggle="tooltip">
Have you considered adding ui.bootstrap as a dependency in your module? This will allow you to get bootstrap features through angular. Here is an example using a dynamic tooltip (uib-tooltip). More bootstrap examples can be found at: http://angular-ui.github.io/bootstrap/
angular.module('myApp', ['ui.bootstrap'])
.controller('MainController', function ($scope) {
var pump = {};
$scope.pump = pump;
pump.state="off";
pump.setState = function (state) {
pump.state = state;
}
});
.pump-image {
background: url('https://gauchedecombat.files.wordpress.com/2012/05/on-off.png') no-repeat;
height: 270px;
width: 262px;
}
.on {
background-position: 0 0;
}
.off {
background-position: -262px 0;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<div ng-app="myApp" ng-controller="MainController as ctrl">
<input type="radio" ng-model="pump.state" value="off" />Off
<input type="radio" ng-model="pump.state" value="on" />On
<div uib-tooltip="Pump: {{pump.state}}" class="pump-image" ng-class="{on: pump.state === 'on', off: pump.state==='off'}" tooltip-placement="right"></div>
</div>
Here is a working sample: http://plnkr.co/edit/KNjxPZLFcUKS2M2fHj5G?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#2.0.0-alpha.45" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Hello Plunker!</h1>
<img ng-src="{{imgUrl}}" alt="Smiley face" title="Test String {{imgTitle}}" height="42" width="42">
</body>
</html>
JavaScript:
angular.module('app',[]);
angular.module('app').controller("MainCtrl",function($scope){
$scope.imgUrl = "http://b3.us.is.pp.ru/m/mink_blue/1/45377641oJC.jpg";
$scope.imgTitle = "Hello World!";
});
Is your app wired correctly? Please check the controller and the variables in scope. Or try to share a plunk.

beforeActivate not firing jeasyui

I've read through many of these questions and they are answered the same. I've tried it but can't get it to work. I've gotten the code very small. What am I doing wrong? The tabs work fine, but no event getting fired.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs({
beforeActivate: function(event,ui) {
alert("Tabs Changed");
}
});
});
</script>
</head>
<body>
<div class="easyui-tabs" id="tabs">
<div Title="Home" >
Home
</div>
<div Title="Admin">
Admin
</div>
</div>
</body>
</html>
thanks,
dave

jQuery link not fired

I am trying to load some ajax Content, but whenever i click on the link jQuery does not respond.
Heres my html with jquery
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="e3.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='img/site/loader.gif' alt='loading...' />";
// load() functions
$(document).ready(function()
{
$("#omtA").click(function()
{
var loadUrl = "fomt.php";
$("#usr")
.html(ajax_load)
.load(loadUrl, "fid=<?php echo $fid;?>");
}
);
);
</script>
</head>
<body>
<div id="page">
<div id="content">
<div id="up">
<div id="tab">
<ul id="tabmenu">
<li id="anm" class="tbs blue"><span>Anm</span></li>
<li id="kom" class="tbs blue"><span>Kom</span></li>
<li id="omt" class="tbs blue"><span>Omt</span></li>
<li id="sts" class="tbs blue"><span>Sts</span></li>
</ul>
</div>
<div id="usrp">
<a name="usrl"></a>
<div id="usr">
hans
</div>
</div>
</div>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
But when I click on the the Omt link with the id omtA nothing happends.
I have also tried
$("a#omtA").click(function()
make the link a class and tried
$(".omtA").click(function()
and
$("a.omtA").click(function()
But none of that helped.
Use this.. You have missed the closing brace } ..
$(document).ready(function() {
$("#omtA").click(function() {
var loadUrl = "fomt.php";
$("#usr")
.html(ajax_load)
.load(loadUrl, "fid=<?php echo $fid;?>");
});
});
It looks like you are missing an ending brace:
$(document).ready(function() {
$("#omtA").click(function() {
var loadUrl = "fomt.php";
$("#usr")
.html(ajax_load)
.load(loadUrl, "fid=<?php echo $fid;?>");
});
}/* <- that brace was missing */);