I'm getting the error:
Argument 'AccordionDemoCtrl' is not a function, got undefined.
My Javascript file is:
angular.module('DatePicker', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('DatePicker').controller('DatepickerPopup', function ($scope) {
$scope.today = function () {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function () {
$scope.dt = null;
};
$scope.inlineOptions = {
customClass: getDayClass,
minDate: new Date(),
showWeeks: true
};
$scope.dateOptions = {
dateDisabled: disabled,
formatYear: 'yy',
maxDate: new Date(2040, 5, 22),
minDate: new Date(),
startingDay: 1
};
// Disable weekend selection
function disabled(data) {
var date = data.date,
mode = data.mode;
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
}
$scope.toggleMin = function () {
$scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
$scope.dateOptions.minDate = $scope.inlineOptions.minDate;
};
$scope.toggleMin();
//$scope.open1 = function () {
// $scope.popup1.opened = true;
//};
$scope.open2 = function () {
$scope.popup2.opened = true;
};
$scope.setDate = function (year, month, day) {
$scope.dt = new Date(year, month, day);
};
//$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.formats = ['dd-MMMM-yyyy'];
$scope.format = $scope.formats[0];
//$scope.altInputFormats = ['M!/d!/yyyy'];
$scope.popup1 = {
opened: false
};
$scope.popup2 = {
opened: false
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0, 0, 0, 0);
for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0, 0, 0, 0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '';
}
});
angular.module('DatePicker',[]).controller('AccordionDemoCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.groups = [
{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
},
{
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}
];
$scope.items = ['Item 1', 'Item 2', 'Item 3'];
$scope.addItem = function () {
var newItemNo = $scope.items.length + 1;
$scope.items.push('Item ' + newItemNo);
};
$scope.status = {
isCustomHeaderOpen: false,
isFirstOpen: true,
isFirstDisabled: false
};
});
And my HTML file is:
<!DOCTYPE html>
<html ng-app="lsApp.DatePicker">
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="Scripts/DatePicker.js">
</script>
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
{{heading}}
</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
<p>
<button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
<button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
</p>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="oneAtATime">
Open only one at a time
</label>
</div>
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</div>
<div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</div>
<div uib-accordion-group class="panel-default" heading="Dynamic Body Content">
<p>The body of the uib-accordion group grows to fit the contents</p>
<button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</div>
<div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">
Hello
</div>
<div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
<uib-accordion-heading>
Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
</uib-accordion-heading>
World
</div>
<div uib-accordion-group class="panel-danger" heading="Delete account">
<p>Please, to delete your account, click the button below</p>
<button class="btn btn-danger">Delete</button>
</div>
<div uib-accordion-group class="panel-default" is-open="status.open">
<uib-accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
This is just some content to illustrate fancy headings.
</div>
</uib-accordion>
</div>
</body>
</html>
What I am doing wrong? Why am I only getting errors in Google Chrome?
Remove the brackets [] it should looks like :
angular.module('DatePicker').controller('AccordionDemoCtrl', function ($scope)
When you are trying to declare a controller with the module no need to mention the depdencies,
Change
From:
angular.module('DatePicker',[]).controller('AccordionDemoCtrl', function
To:
angular.module('DatePicker').controller('AccordionDemoCtrl', function
Related
I have a datepicker panel that displays the date I select. I have a start date and an end date. When I click the button on the panel a modal opens up and I can select the start date and the end date. By default when I enter the page nothing is displayed until I select the date from the modal. The idea is that what I want is that when I enter the page in the panel should be displayed todays date.
This is the code for the panel:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
{{card}}
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<p>{{DatePickerCtrl.chosenStartDate | date : 'longDate'}} -
{{DatePickerCtrl.chosenEndDate | date : 'longDate'}}
</p>
</div>
</div>
</div>
<a href ng-click="footerLinkClicked()">
<div class="panel-footer">
<span class="pull-left">Select Date</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
The controller:
angular.module('opp').directive('datePickerDirective',function($mdDialog, $rootScope, $filter){
return {
restrict: 'E',
templateUrl:'/picker-select/picker-select.html',
scope: {
card: '='
},
controller:function($scope){
var self = this;
$rootScope.$on("dateWasChosen", function(){
self.chosenStartDate = JSON.parse(localStorage.getItem('chosenStartDate'));
self.chosenEndDate = JSON.parse(localStorage.getItem('chosenEndDate'));
});
$scope.footerLinkClicked = function(){
$mdDialog.show({
controller : datePickerController,
templateUrl : '/picker-select/picker-modal.html',
parent : angular.element(document.body),
clickOutsideToClose:true
}).then(function(answer) {
console.log("Fff");
}, function() {
});
}
},
controllerAs: 'DatePickerCtrl'
}
})
function datePickerController($scope, $mdDialog, $rootScope, datePickerFactory, $filter){
console.log("");
$scope.startDateL = new Date();
$scope.endDateL = new Date();
$scope.close = function() {
$mdDialog.hide();
console.log("closing");
}
$scope.setDate = function(startDate, endDate) {
$rootScope.startDate = $scope.startDateL;
$rootScope.endDate = $scope.endDateL;
var stDate = $filter('date')($rootScope.startDate,'yyyy-MM-dd');
var enDate = $filter('date')($rootScope.endDate,'yyyy-MM-dd');
console.log(stDate);
console.log(enDate);
intrvl = localStorage.getItem("interval");
if (intrvl != null || intrvl != undefined || intrvl != 'null') {
localStorage.setItem("interval",'D');
}
var interval = localStorage.getItem("interval");
datePickerFactory.save({interv: interval, sDate: stDate, eDate: enDate}, function(){
})
localStorage.setItem('chosenStartDate', JSON.stringify($rootScope.startDate));
localStorage.setItem('chosenEndDate', JSON.stringify($rootScope.endDate));
$rootScope.$broadcast("dateWasChosen");
$mdDialog.hide();
}
}
and the modal:
<!-- Modal -->
<md-dialog aria-label="Date Picker">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">{{modalTitle}}</h4>
</div>
<!-- /.modal-header -->
<div class="modal-body">
<md-input-container flex> <input type="date"
ng-model="startDateL"> </md-input-container>
<md-input-container flex> <input
type="date" ng-model="endDateL"> </md-input-container>
<!-- /.modal-search-box -->
<md-button ng-click="setDate()" class="md-primary">Update Date</md-button>
</div>
<!-- /.modal-body -->
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</md-dialog>
<!-- /.modal -->
This is my code.
Markup:
<div ng-repeat="product in Products" ng-if="$index % 3 == 0" class="row">
<div class="col-xs-4">
<md-checkbox checklist-model="user.roles" checklist-value="{{Products[$index]}}"><span>{{Products[$index].Name}}</span></md-checkbox>
</div>
<div class="col-xs-4">
<md-checkbox checklist-model="user.roles" checklist-value="{{Products[$index]}}"><span>{{Products[$index+1].Name}}</span></md-checkbox>
</div>
<div class="col-xs-4">
<md-checkbox checklist-model="user.roles" checklist-value="{{Products[$index]}}"><span>{{Products[$index+2].Name}}</span></md-checkbox>
</div>
</div>
<button ng-click="checkAll()" style="margin-right: 10px">Check all</button>
<button ng-click="uncheckAll()" style="margin-right: 10px">Uncheck all</button>
<button ng-click="checkFirst()">Check first</button>
<button ng-click="setToNull()" ng-if="setToNull">Set to null</button>
Controller:
var pramiseGet = angularService.GetProducts();
pramiseGet.then(function (pl) {
$scope.Products = pl.data;
console.log($scope.Products);
},
function (errorPl) {
$log.error("Error", errorPl);
});
$scope.roles = {};
$scope.user = {};
$scope.sendingID = {};
$scope.checkAll = function () {
$scope.user.roles = angular.copy($scope.Products);
};
$scope.uncheckAll = function () {
$scope.user.roles = [];
};
$scope.checkFirst = function () {
$scope.user.roles.splice(0, $scope.user.roles.length);
$scope.user.roles.push('guest');
};
What I want to do is when I check the checkbox I need the data to be seen in the below div where the code is
<div class="col-xs-12 col-sm-6">
<h3>user.roles</h3>
<pre>{{user.roles|json}}</pre>
</div>
At the moment I'm not getting any data viewd in the above div . Any help
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.Products = [{
name: 'Product 1',id:1
}, {
name: 'Product 2',id:1
}, {
name: 'Product 3',id:1
}, {
name: 'Product 4',id:1
}, {
name: 'Product 5',id:1
}, {
name: 'Product 6',id:1
}, {
name: 'Product 7',id:1
}, {
name: 'Product 8',id:1
}, {
name: 'Product 9',id:1
}, {
name: 'Product 10',id:1
}, {
name: 'Product 11',id:1
}, {
name: 'Product 12',id:1
}];
$scope.selectedProducts = [];
$scope.updateSelectedProducts = function(){
$scope.selectedProducts = $scope.Products.filter(function(e){return e.checked});
};
$scope.checkAll = function() {
$scope.Products.forEach(function(e) {
e.checked = true
});
$scope.updateSelectedProducts();
}
$scope.uncheckAll = function() {
$scope.Products.forEach(function(e) {
e.checked = false
});
$scope.updateSelectedProducts();
}
$scope.checkFirst = function() {
$scope.Products[0].checked = true;
$scope.updateSelectedProducts();
}
$scope.checkAll = function() {
$scope.Products.forEach(function(e) {
e.checked = true;
});
$scope.updateSelectedProducts();
}
$scope.setToNull = function() {
$scope.Products.forEach(function(e) {
e.checked = null;
});
$scope.updateSelectedProducts();
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p>
Selected Products: {{selectedProducts}}</p>
<div ng-repeat="product in Products track by $index" ng-if="$index%3 == 0" class="row">
<div class="col-xs-4">
<input ng-model="Products[$index].checked" type="checkbox" ng-change="updateSelectedProducts()">{{Products[$index].name}}</checkbox>
</div>
<div class="col-xs-4">
<input ng-model="Products[$index+1].checked" type="checkbox" ng-change="updateSelectedProducts()">{{Products[$index+1].name}}</checkbox>
</div>
<div class="col-xs-4">
<input ng-model="Products[$index+2].checked" type="checkbox" ng-change="updateSelectedProducts()">{{Products[$index+2].name}}</checkbox>
</div>
</div>
<button ng-click="checkAll()" style="margin-right: 10px">Check all</button>
<button ng-click="uncheckAll()" style="margin-right: 10px">Uncheck all</button>
<button ng-click="checkFirst()">Check first</button>
<button ng-click="setToNull()" ng-if="setToNull">Set to null</button>
</br>
</br>
</br>
</br></br>
</div>
Check the following code, this should solve your problem.
view
div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="p in Products">
<input ng-model="p.checked" type="checkbox" >{{p.name}}</checkbox>
</li>
</ul>
<button ng-click="checkAll()" style="margin-right: 10px">Check all</button>
<button ng-click="uncheckAll()" style="margin-right: 10px">Uncheck all</button>
<button ng-click="checkFirst()">Check first</button>
<button ng-click="setToNull()" ng-if="setToNull">Set to null</button>
{{Products}}
</div>
controller
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.Products = [{name:'Product 1'},{name:'Product 2'},{name:'Product 3'}];
$scope.checkAll = function(){
$scope.Products.forEach(function(e){e.checked = true})
}
$scope.uncheckAll = function(){
$scope.Products.forEach(function(e){e.checked = false})
}
$scope.checkFirst= function(){
$scope.Products[0].checked = true
}
$scope.checkAll = function(){
$scope.Products.forEach(function(e){e.checked = true;})
}
$scope.setToNull = function(){
$scope.Products.forEach(function(e){e.checked = null;});
}
});
Onclick of a video should open the popup window.In the popup window the video should be playing and should have an option for closing the popup window,if not needed.
Can anyone please help me out regarding this ...
My html :
<div class="container-fluid" ng-controller="videocontroller">
<div class="panel panel-default">
<div class="panel-heading">
<h3>
<b>Video Segment</b>
</h3>
</div>
<div class="panel-body">
<div ng-show="videoSources.length">
<video width=176 height=99
style="margin-left: 70px; margin-right: 10px;"
ng-repeat="videoSource in videoSources | paginate:pageNum:pageSize track by $index"
controls ng-src="{{videoSource | trustUrl}}">
</video>
<div style="margin-left: 46px;">
<button style="margin-left: 750px" ng-disabled="isFirstPage()"
ng-click="prevPage()">Previous</button>
<button style="margin-left: auto;" ng-disabled="isLastPage()"
ng-click="nextPage()">Next</button>
</div>
</div>
<div ng-hide="videoSources.length">
<a href="#" ng-click='loadVideos()'>Load videos</a>
</div>
</div>
</div>
</div>
My js:
app.controller(
'videocontroller',
function($scope) {
$scope.pageNum = 0;
$scope.pageSize = 3;
$scope.isFirstPage = function() {
return $scope.pageNum === 0;
};
$scope.isLastPage = function() {
return $scope.pageNum >= Math.floor($scope.videoSources.length
/ $scope.pageSize);
};
$scope.prevPage = function() {
$scope.pageNum--;
};
$scope.nextPage = function() {
$scope.pageNum++;
};
$scope.videoSources = [
'http://Video/Digital_Hiring.mp4',
'http://Video/Digital_Hiring.mp4',
'http://Video/Digital_Hiring.mp4',
'http://Video/Digital_Hiring.mp4',
'http://Video/Digital_Hiring.mp4' ];
}).filter("trustUrl", [ '$sce', function($sce) {
return function(recordingUrl) {
return $sce.trustAsResourceUrl(recordingUrl);
};
} ]).filter(
'paginate',
function() {
console.log('creating paginate function', arguments);
return function(inputArray, pageNumber, pageSize) {
console.log('paginating', arguments);
pageNumber = pageNumber || 0;
pageSize = pageSize || 4;
if (!Array.isArray(inputArray))
return inputArray;
return inputArray.slice(pageNumber * pageSize, (pageNumber + 1)
* pageSize);
};
});
Here is a possible solution based on Angular ui-bootstrap modal:
var app = angular.module('app', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $log, $uibModal) {
$scope.open = function(size, videoSource) {
$log.info("open", videoSource);
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModal.html',
controller: 'ModalInstanceCtrl',
backdrop: true,
size: size,
resolve: {
videoSource: function() {
return videoSource;
}
}
});
modalInstance.result.then(function(result) {
//
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.videoClick = function($event, videoSource) {
$log.info("videoClick", videoSource)
$scope.open('lg', videoSource);
};
});
app.controller('ModalInstanceCtrl', function($scope, $uibModalInstance, videoSource, $log) {
$log.info("ModalInstanceCtrl", videoSource);
$scope.id = Math.floor((Math.random() * 100) + 1);
$scope.videoSource = videoSource;
$scope.ok = function() {
$uibModalInstance.close('ok');
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
app.controller(
'videocontroller',
function($scope) {
$scope.pageNum = 0;
$scope.pageSize = 3;
$scope.isFirstPage = function() {
return $scope.pageNum === 0;
};
$scope.isLastPage = function() {
return $scope.pageNum >= Math.floor($scope.videoSources.length / $scope.pageSize);
};
$scope.prevPage = function() {
$scope.pageNum--;
};
$scope.nextPage = function() {
$scope.pageNum++;
};
$scope.videoSources = [
'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4',
'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4',
'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4',
'http://Video/Digital_Hiring.mp4',
'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4'
];
});
app.filter("trustUrl", ['$sce', function($sce) {
return function(recordingUrl) {
return $sce.trustAsResourceUrl(recordingUrl);
};
}]);
app.filter(
'paginate',
function() {
console.log('creating paginate function', arguments);
return function(inputArray, pageNumber, pageSize) {
console.log('paginating', arguments);
pageNumber = pageNumber || 0;
pageSize = pageSize || 4;
if (!Array.isArray(inputArray))
return inputArray;
return inputArray.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize);
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container-fluid" ng-controller="videocontroller">
<div class="panel panel-default">
<div class="panel-heading">
<h3><b>Video Segment</b></h3>
</div>
<div class="panel-body">
<div ng-show="videoSources.length">
<video width=176 height=99 style="margin-left: 70px; margin-right: 10px;"
ng-repeat="videoSource in videoSources | paginate:pageNum:pageSize track by $index" ng-src="{{videoSource | trustUrl}}"
ng-click="videoClick($event, videoSource)">
</video>
<div style="margin-left: 46px;">
<button style="margin-left: 750px" ng-disabled="isFirstPage()" ng-click="prevPage()">Previous</button>
<button style="margin-left: auto;" ng-disabled="isLastPage()" ng-click="nextPage()">Next</button>
</div>
</div>
<div ng-hide="videoSources.length">
<a href="#" ng-click='loadVideos()'>Load videos</a>
</div>
</div>
</div>
</div>
<script type="text/ng-template" id="myModal.html">
<div id="my-modal-{{id}}" click-outside="cancel()">
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
<div class="media">
<video style="width:100%;height:100%;" controls autoplay ng-src="{{videoSource | trustUrl}}"></video>
</div>
<pre>src = {{videoSource | trustUrl}}</pre>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</div>
</script>
</body>
</html>
When you press at the image the youtube video will popup in a nice way
<a data-video="https://www.youtube.com/embed/GdC7jOuk4g8?autoplay=1" class="video" data-toggle="modal" data-target="#videoModal" ><%= image_tag "WatchNow.jpg",width:"250" %></a>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<iframe width="500" height="445" src="https://www.youtube.com/embed/GdC7jOuk4g8?autoplay=1&mute=1&enablejsapi=1" allow="autoplay">
</iframe>
</div>
</div>
<script type="text/javascript">
$(function() {
$(".video").click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-video"),
videoSRCauto = videoSRC + "";
$(theModal + ' source').attr('src', videoSRCauto);
$(theModal + ' video').load();
$(theModal + ' button.close').click(function () {
$(theModal + ' source').attr('src', videoSRC);
});
});
});</script>
//Define angular app
var app = angular.module('ToDoApp', []);
//controllers
app.controller('taskController', function($scope) {
$scope.today = new Date();
$scope.saved = localStorage.getItem('taskItems');
$scope.taskItem = (localStorage.getItem('taskItems') !== null) ?
JSON.parse($scope.saved) : [{
description: "Why not add a task?",
date: $scope.today,
complete: false
}];
localStorage.setItem('taskItems', JSON.stringify($scope.taskItem));
$scope.newTask = null;
$scope.newTaskDate = null;
$scope.categories = [{
name: 'Personal'
}, {
name: 'Work'
}, {
name: 'School'
}, {
name: 'Cleaning'
}, {
name: 'Other'
}];
$scope.newTaskCategory = $scope.categories;
$scope.addNew = function() {
if ($scope.newTaskDate == null || $scope.newTaskDate == '') {
$scope.taskItem.push({
description: $scope.newTask,
date: "No deadline",
complete: false,
category: $scope.newTaskCategory.name
})
} else {
$scope.taskItem.push({
description: $scope.newTask,
date: $scope.newTaskDate,
complete: false,
category: $scope.newTaskCategory.name
})
};
$scope.newTask = '';
$scope.newTaskDate = '';
$scope.newTaskCategory = $scope.categories;
localStorage.setItem('taskItems', JSON.stringify($scope.taskItem));
};
$scope.deleteTask = function() {
var completedTask = $scope.taskItem;
$scope.taskItem = [];
angular.forEach(completedTask, function(taskItem) {
if (!taskItem.complete) {
$scope.taskItem.push(taskItem);
}
});
localStorage.setItem('taskItems', JSON.stringify($scope.taskItem));
};
$scope.save = function() {
localStorage.setItem('taskItems', JSON.stringify($scope.taskItem));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ToDoApp">
<div class="container">
<div class="content" ng-controller="taskController">
<h1>Welcome to your to do List</h1>
<p class="tagline">By Flintdesignz
</p>
<form>
<div class="row">
<div class="inputContainer">
<input type="text" id="description" class="taskName" placeholder="I need to..." ng-model="newTask">
</div>
</div>
<div class="row">
<div class="inputContainer"> <i class="fa fa-caret-down selectArrow"></i>
<select id="category" class="taskCategory" ng-model="newTaskCategory" ng-options="obj.name for obj in categories">
<option class="disabled" value="">Category</option>
</select>
</div>
</div>
<div class="row">
<div class="inputContainer">
<input type="date" id="dueDate" class="taskDate" ng-model="newTaskDate">
</div>
</div>
<div class="row buttons_holder">
<button class="taskAdd" ng-click="addNew()"><i class="fa fa-plus icon"></i>Add task</button>
<button class="taskDelete" ng-click="deleteTask()"><i class="fa fa-trash-o icon"></i>Remove Tasks</button>
</div>
</form>
<!-- TaskList Starts Here -->
<ul class="taskList">
<li class="taskItem" ng-repeat="taskItem in taskItem track by $index" ng-model="taskItem">
<input type="checkbox" class="taskCheckbox" ng-model="taskItem.complete" ng-change="save()">
<span class="complete-{{taskItem.complete}}">{{taskItem.description}}</span> <span class="category-{{taskItem.category}}">{{taskItem.category}}</span> <strong class="taskDate complete-{{taskItem.complete}}"><i class="fa fa-calendar"></i>{{taskItem.date | date : 'mediumDate'}}</strong>
</li>
</ul>
<!-- TaskList Ends HEre -->
</div>
<!-- Content Ends Here -->
</div>
<!-- container -->
</div>
Building a Todo App that adds tasks and deletes them aswell and getting the above error. Below is my html and my angular code. I have checked other blogs and still no valid answer.
Hi I was trying to run this angular based chat app, but it's giving me this error. Kindly please help me fix this.
the code is already available on
https://github.com/tamaspiros/AngularChat
the error i am getting is
Error: [ng:areq] Argument 'ChatAppCtrl' is not a function, got undefined
http://errors.angularjs.org/1.3.9/ng/areq?p0=ChatAppCtrl&p1=not%20a%20function%2C%20got%20undefined
at REGEX_STRING_REGEXP (angular.js:63)
at assertArg (angular.js:1577)
at assertArgFn (angular.js:1587)
at angular.js:8418
at angular.js:7592
at forEach (angular.js:331)
at nodeLinkFn (angular.js:7579)
at compositeLinkFn (angular.js:7075)
at compositeLinkFn (angular.js:7078)
at publicLinkFn (angular.js:6954)
the index.html is
<!DOCTYPE html>
<html ng-app="chat">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.yeti.css">
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" href="components/font-awesome/css/font-awesome.css">
</head>
<body ng-controller="ChatAppCtrl" ng-cloak>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" ng-click="about()">AngularChat</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text online" ng-if='status === "online"'>{{ status }}</p><p class="navbar-text offline" ng-if='status === "offline"'>{{ status }}</p></li>
<li class="dropdown" ng-show="joined">
{{ peopleCount }} online <b class="caret" ng-if="peopleCount > 0"></b>
<ul class="dropdown-menu">
<li ng-repeat="user in users"><p class="white">{{ user.name }} <span ng-if="user.countrycode"><img class="flag flag-{{user.countrycode}}"></span> <i class="fa fa-{{user.device}}"></i></p></li>
</ul>
</li>
<li class="dropdown" ng-show="joined">
{{ roomCount }} room<span ng-if="roomCount === 0 || roomCount > 1">s</span> <b class="caret" ng-if="roomCount > 0"></b>
<ul class="dropdown-menu">
<li ng-repeat="room in rooms">
<form class="form-inline" role="form"><div class="form-group"><p class="white">{{ room.name }}</p></div><button class="btn btn-success btn-xs" type="submit" ng-click='joinRoom(room)' ng-hide='room.id === user.owns || room.id === user.inroom || user.owns || user.inroom'>Join</button>
<button type="submit" ng-click='deleteRoom(room)' class="btn btn-xs btn-danger" ng-show='room.id === user.owns'>Delete</button>
<button type="submit" ng-click="leaveRoom(room)" class="btn btn-xs btn-info" ng-hide='room.id === user.owns || !user.inroom || user.owns || user.inroom !== room.id'>Leave</button></form>
</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Begin page content -->
<div class="container" ng-show="!joined">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="username">Name: </label>
<input type="text" class="form-control" name="username" id="username" ng-model="username" placeholder="Enter desired name">
</div>
<button type="submit" class="btn btn-default btn-sm" ng-click='joinServer()'>Enter chat</button>
</form>
<small ng-if="error" class="text-danger">{{ error.join }}</small> <small ng-if="suggestedUsername" class="text-info" ng-click="setUsername(suggestedUsername)">How about <span class="text-success" style="cursor: pointer;">{{ suggestedUsername }}</a>?</small>
</div>
<div ng-hide="!joined" class="container" >
<p >Hello {{ user.name }}. <span ng-if="user.owns">You own a room: <strong>{{ user.roomname }}</strong>.</span> <span ng-if="!user.owns && user.inroom">You have joined a room: <strong>{{ user.roomname }}</strong>.<br> You can create your own room as well (but you need to leave the current one first)
</span><br>
<small ng-if="user.owns">You can remove your room by clicking delete in drop-down menu in the top right corner.</small></p>
<p ng-show="!user.inroom">Create a chat room or join one (top right corner).
<div id="createroom">
<form class="form-inline" role="form" ng-hide="user.owns && user.inroom">
<div class="form-group">
<label class="sr-only" for="roomname">Room name: </label>
<input type="text" placeholder="Enter room name" class="form-control" ng-model="roomname" name="roomname" id="roomname">
</div>
<button type="submit" class="btn btn-default btn-sm" ng-click="createRoom()">Create room</button>
<small ng-if="error" class="text-danger">{{ error.create }}</small>
</form>
</div>
<div id="chatpanel" ng-show="user.inroom" >
<div id="chat">
<form class="form-inline" role="form" ng-show="user.owns || user.inroom">
<div class="form-group">
<label class="sr-only" for="message">Message: </label>
<input type="text" placeholder="Enter message" class="form-control" ng-model="message" name="message" id="message" ng-keypress="typing($event, user.inroom)" on-focus="focus(true)" on-blur="focus(false)">
</div>
<button type="submit" class="btn btn-default btn-sm" ng-click='send()'>Send message</button>
</form>
<small ng-if="error" class="text-danger">{{ error.send }}</small>
</div>
<div class="row">
<div class="col-lg-6">
<div id="messages">
<ul>
<li class="list-unstyled" ng-repeat="message in messages track by $index" autoscroll ng-class="{dark: $index % 2 === 0}"><strong>{{ message.name }}</strong>: {{ message.message }}</li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div id="sidebar">
<ul ng-if="isTyping">
<li ng-repeat="person in typingPeople track by $index" class="text-muted list-unstyled"><small>{{ person }} is typing</small></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">AngularChat by Tamas Piros | http://tamas.io/ | <a href="https://twitter.com/tpiros" target="_blank">#tpiros</p>
</div>
</div>
<!-- about modal -->
<script type="text/ng-template" id="aboutModal" />
<div class="modal-header">
<h3>About AngularChat</h3>
</div>
<div class="modal-body">
<p>Hello and thanks for visiting AngularChat.</p>
<p>This is an experimental project for testing new JavaScript technologies.</p>
<p>First, please enter your username. Once you've done this you have two options. You can create a room or you can join an already existing one.</p>
<p>Please note that once you've joined a room you can't create one (basically you can be part of one room at one time). Also note that if you're a room owner and you disconnect from the server, delete or leave your room all other participants will be removed from the room as well.</p>
<p>If you'd like to read more about the project please check out this article: http://tamas.io/angularchat/</p>
<p>If you're interested in the code behind this project, please go to: https://github.com/tamaspiros/angularchat</p>
</div>
<div class="modal-footer">
<button class="btn btn-warning btn-sm cancel" ng-click="cancel()">Cancel</button>
</div>
</div>
</script>
<script src="/socket.io/socket.io.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="components/jquery/dist/jquery.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
</body>
</html>
and the function ChatAppCtrl is
'use strict';
function ChatAppCtrl($scope, $q, $modal, socket, useragent, geolocation) {
$scope.peopleCount = 0;
$scope.messages = [];
$scope.user = {}; //holds information about the current user
$scope.users = {}; //holds information about ALL users
$scope.rooms = []; //holds information about all rooms
$scope.error = {};
$scope.typingPeople = [];
$scope.username = '';
$scope.joined = false;
var typing = false;
var timeout = undefined;
/* ABOUT PAGE */
$scope.about = function() {
var modalInstance = $modal.open({
templateUrl: 'aboutModal',
controller: aboutModalCtrl
});
};
var aboutModalCtrl = function($scope, $modalInstance) {
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
/* ABOUT PAGE END */
$scope.setUsername = function(suggestedUsername) {
$scope.username = suggestedUsername;
}
function timeoutFunction() {
typing = false;
socket.emit('typing', false);
}
$scope.focus = function(bool) {
$scope.focussed = bool;
}
$scope.typing = function(event, room) {
if (event.which !== 13) {
if (typing === false && $scope.focussed && room !== null) {
typing = true;
socket.emit('typing', true);
} else {
clearTimeout(timeout);
timeout = setTimeout(timeoutFunction, 1000);
}
}
}
socket.on('isTyping', function(data) {
if (data.isTyping) {
$scope.isTyping = data.isTyping;
$scope.typingPeople.push(data.person);
} else {
$scope.isTyping = data.isTyping;
var index = $scope.typingPeople.indexOf(data.person);
$scope.typingPeople.splice(index, 1);
$scope.typingMessage = '';
}
});
$scope.joinServer = function() {
$scope.user.name = this.username;
if ($scope.user.name.length === 0) {
$scope.error.join ='Please enter a username';
} else {
var usernameExists = false;
socket.emit('checkUniqueUsername', $scope.user.name, function(data) {
usernameExists = data.result;
if (usernameExists) {
$scope.error.join = 'Username ' + $scope.user.name + ' already exists.';
socket.emit('suggest', $scope.user.name, function(data) {
$scope.suggestedUsername = data.suggestedUsername;
});
} else {
socket.emit('joinSocketServer', {name: $scope.user.name});
$scope.joined = true;
$scope.error.join = '';
}
});
}
}
$scope.send = function() {
if (typeof this.message === 'undefined' || (typeof this.message === 'string' && this.message.length === 0)) {
$scope.error.send = 'Please enter a message';
} else {
socket.emit('send', {
name: this.username,
message: this.message
});
$scope.message = '';
$scope.error.send = '';
}
}
$scope.createRoom = function() {
var roomExists = false;
var room = this.roomname;
if (typeof room === 'undefined' || (typeof room === 'string' && room.length === 0)) {
$scope.error.create = 'Please enter a room name';
} else {
socket.emit('checkUniqueRoomName', room, function(data) {
roomExists = data.result;
if (roomExists) {
$scope.error.create = 'Room ' + room + ' already exists.';
} else {
socket.emit('createRoom', room);
$scope.error.create = '';
if (!$scope.user.inroom) {
$scope.messages = [];
$scope.roomname = '';
}
}
});
}
}
$scope.joinRoom = function(room) {
$scope.messages = [];
$scope.error.create = '';
$scope.message = '';
socket.emit('joinRoom', room.id);
}
$scope.leaveRoom = function(room) {
$scope.message = '';
socket.emit('leaveRoom', room.id);
}
$scope.deleteRoom = function(room) {
$scope.message = '';
socket.emit('deleteRoom', room.id)
}
socket.on('sendUserDetail', function(data) {
$scope.user = data;
});
socket.on('listAvailableChatRooms', function(data) {
$scope.rooms.length = 0;
angular.forEach(data, function(room, key) {
$scope.rooms.push({name: room.name, id: room.id});
});
});
socket.on('sendChatMessage', function(message) {
$scope.messages.push(message);
});
socket.on('sendChatMessageHistory', function(data) {
angular.forEach(data, function(messages, key) {
$scope.messages.push(messages);
});
});
socket.on('connectingToSocketServer', function(data) {
$scope.status = data.status;
});
socket.on('usernameExists', function(data) {
$scope.error.join = data.data;
});
socket.on('updateUserDetail', function(data) {
$scope.users = data;
});
socket.on('joinedSuccessfully', function() {
var payload = {
countrycode: '',
device: ''
};
geolocation.getLocation().then(function(position) {
return geolocation.getCountryCode(position);
}).then(function(countryCode) {
payload.countrycode = countryCode;
return useragent.getUserAgent();
}).then(function(ua) {
return useragent.getIcon(ua);
}).then(function(device) {
payload.device = device;
socket.emit('userDetails', payload);
});
});
socket.on('updatePeopleCount', function(data) {
$scope.peopleCount = data.count;
});
socket.on('updateRoomsCount', function(data) {
$scope.roomCount = data.count;
});
socket.on('disconnect', function(){
$scope.status = 'offline';
$scope.users = 0;
$scope.peopleCount = 0;
});
}
Recent versions of Angular do not allow global functions to be used as controllers, see docs under "Arguments". The solutions:
(preferred) Use angular.module('chat').controller('ChatAppCtrl', ChatAppCtrl);
Configure the $controllerProvider: In a coonfig block, inject the $controllerProvider and run: $controllerProvider.allowGlobals().