Angular-timer siddii - javascript

in my web app (which is with angularJs in the front part and with Symfony2 in the back part) i need to integrate a timer (count down of a quizzer) i found this timer https://github.com/siddii/angular-timer on github and it seems to be cool but i don't the integration in my webapp works but when i try to start the counter on an event (button click) it don't works, in fact i tried this script:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example - Single Timer Example</title>
<script src="../angular/angular.min.js"></script>
<script src="../app/js/timer.js"></script>
<script>
angular.module('MyApp', ['timer']);
function MyAppController($scope) {
$scope.timerRunning = true;
$scope.startTimer = function (){
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
};
$scope.stopTimer = function (){
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
};
$scope.$on('timer-stopped', function (event, data){
console.log('Timer Stopped - data = ', data);
});
}
MyAppController.$inject = ['$scope'];
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyAppController">
<h1>AngularJS - Single Timer Example</h1>
<h3><timer/></h3>
<button ng-click="startTimer()" ng-disabled="timerRunning">Start Timer</button>
<button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>
</div>
<br/>
</body>
</html>
and i got this error:
Argument 'MyAppController' is not a function, got undefined
any one can help me plz ?
after some changes the my code becomes :
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example - Single Timer Example</title>
<script src="../angular/angular.min.js"></script>
<script src="../app/js/timer.js"></script>
<script>
var myApp = angular.module('myApp', ['timer']);
myApp.controller('MyAppController', ['$scope', function ($scope)
{
$scope.timerRunning = true;
$scope.startTimer = function (){
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
};
$scope.stopTimer = function (){
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
};
$scope.$on('timer-stopped', function (event, data){
console.log('Timer Stopped - data = ', data);
});
}]).$inject = ['$scope'];
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyAppController">
<h1>AngularJS - Single Timer Example</h1>
<h3><timer/></h3>
<button ng-click="startTimer()" ng-disabled="timerRunning">Start Timer</button>
<button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>
</div>
<br/>
</body>
</html>
and i'm getting this beauty :/
Unknown provider: I18nServiceProvider <- I18nService

Related

How to change the name on a button dynamically using angular js

my code:
<button id="btnajs" ng-click="AppendText()">Using angularjs</button>
<div id="divID"></div>
<script>
var count=1;
function myCtrl($scope) {
$scope.AppendText = function() {
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.append("<tr><td><button type='submit' name='id_"+count+"' class='newbtn' id='"+count+"' data-toggle='modal' data-target='#mymodal'>{{bn}}</button></td></tr>");
count++;
}
}
var myapp=angular.module("myapp",[]);
myapp.controller('btncontrol',function($scope){
$scope.bn="Save data";
$scope.save=function(){
$scope.bn= "Saving data...";
};
});
</script>
The button "angular js" is to be clicked and then more buttons are appended below it.. i want to be able to change the names of those appended buttons
to "save data" and after clicking on the same button change to "saving data..", but it only appears as {{bn}}.
I have added all the necessary libraries.
How about something like that
var app = angular.module('my-app', [], function() {});
app.controller('AppController', function($scope) {
$scope.toggle = true;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
<button ng-click="toggle = !toggle">
<span ng-show="toggle">Save Data</span>
<span ng-hide="toggle">Saving Data</span>
</button>
</div>
You do not have to use jquery way,
Just change the scope variable on button click using function.
$scope.AppendText = function(){
$scope.bn = "saving data";
}
DEMO
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
$scope.bn = "Save data";
$scope.AppendText = function(){
$scope.bn = "saving data";
}
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body ng-controller="dobController">
<button ng-click="AppendText()"> {{bn}}</button>
</body>
</html>
No need to use $scope.save in this code. Also write the html part seperate. if you want to code exactly as yours. please call save() in myEl.append.

How to send an angular param to an onclick event?

here we go...
I have a controller
$scope.selectedScript = {};
$scope.selectedScript.scriptId = null;
$scope.selectScript = function(script, index) {
$scope.selectedScript = script;
$scope.selectedRow = index;
myAppFactory.updateTextArea(script).success(
function(data) {
$scope.selectedScript = data;
});
};
$scope.getSelectedClass = function(script) {
if ($scope.selectedScript.scriptId != undefined) {
if ($scope.selectedScript.scriptId == script.scriptId) {
return "selected";
}
}
return "";
};
i have a html page
<label>Script ID:</label>
<input name="scriptId"
type="text"
id="scriptId"
ng-model="selectedScript.scriptId"
ng-disabled="true"
value="{{selectedScript.scriptId}}" />
and now thx to IARKI i have this
<script type="text/javascript">
function goTo (){
var param1 = angular.element(document.querySelector('.scriptId')).scope.selectedScript.scriptId;
location.href=this.href + '?scriptId='+param1;
return false;
}
</script>
Debug
I have also a list of scripts in a table
<table class="scripts" name="tableScript" arrow-selector>
<tr bgcolor="lightgrey">
<th>Script ID</th>
<th>File Name</th>
</tr>
<tr
ng-repeat="s in scripts | filter:searchField | orderBy:'scriptId'"
ng-click="selectScript(s, $index)" ng-class="getSelectedClass(s)">
<td>{{s.scriptId }}</td>
<td>{{s.fileName }}</td>
</tr>
</table>
Then i press the link above, and a new tab appears, but the link is still the
http://localhost:8080/DSS-war/debug.html
but i need it to open in a new tab as well as to be like this:
http://localhost:8080/DSS-war/debug.html?scriptId=1
http://localhost:8080/DSS-war/debug.html?scriptId=2
http://localhost:8080/DSS-war/debug.html?scriptId=12
and so on...with numbers
any idea?
And it has to be the onclick function, not the ng-click
I know how it works on ng-click, but i need to make it work on onclick...
and now i get this from the chrome debugger:
Uncaught TypeError: Cannot read property 'scriptId' of undefined
in the line
var param1 = angular.element(document.querySelector('.scriptId')).scope.selectedScript.scriptId;
You can try to access angular scope using pure javascript
<script type="text/javascript">
function goTo (){
var param1 = angular.element("#scriptId").scope().selectedScript.scriptId;
location.href=this.href + '?scriptId='+param1;
return false;
}
</script>
Debug
Update
Useless code but I hope it will help you
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My application</title>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<label>Script ID:</label>
<input name="scriptId" type="text" id="scriptId" ng-model="selectedScript.scriptId" ng-disabled="true">
<button onclick="generateID()">Set code</button>
Debug
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript">
function generateID() {
var code = Math.floor(Math.random() * 20) + 1;
document.getElementById('scriptId').setAttribute('value', code.toString());
}
function goTo() {
var scope = angular.element(document.querySelector('#scriptId')).scope();
scope.$apply(function () {
scope.selectedScript.scriptId = document.querySelector('#scriptId').getAttribute('value');
});
scope.changeURl();
}
angular.module('myApp', [])
.controller('myCtrl', function ($scope, $window) {
$scope.selectedScript = {};
console.log('We are in controller');
$scope.changeURl = function () {
$window.open('http://localhost:8080/DSS-war/debug.html?scriptId=' + $scope.selectedScript.scriptId, '_blank');
}
});
</script>
</html>

Angular JS code not working

I copied this angularjs code from a book "ng-book". But it is not working at all..........................................................
<!DOCTYPE html>
<html ng-app="">
<head>
<title>Simple App</title>
</head>
<body>
<div ng-controller="MyController">
Hello <span ng-bind="clock"></span>
</div>
<script src="angular-1.5.7/angular.js">
</script>
<script type="text/javascript">
function MyController($scope){
$scope.clock = new Date();
var updateClock = function () {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
</script>
</body>
</html>
Use $interval rather and setInterval.
No need of $scope.$apply() when you use angular's $interval
You need the ng-app defined
The controller definition should be like in the snippet
Here is a working code snippet
var demoApp = angular.module('demoApp', []);
demoApp.controller('MyController', function($interval, $scope) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
$interval(function() {
updateClock();
}, 1000);
updateClock();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Simple App</title>
</head>
<body ng-app="demoApp">
<div ng-controller="MyController">
Hello <span ng-bind="clock"></span>
</div>
</body>
What you are doing is not the most efficient way. For example you could use $interval and so on..
But since you are just starting with Angular, I've made the code working with minimal addition or modification so you can understand:
//addition-start
var app = angular.module('myApp', []);
app.controller("MyController", MyController);
//addition-end
function MyController($scope) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
<!DOCTYPE html>
<!--can be modified to ng-app="myApp"but will work otherwise too -->
<html ng-app="">
<head>
<title>Simple App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js "></script>
</head>
<body>
<div ng-controller="MyController">
Hello <span ng-bind="clock "></span>
</div>
</body>
</html>
first read how to difine angular module and how it works.you didn't define module in html
<!DOCTYPE html>
<html ng-app="testapp">
<head>
<title>Simple App</title>
<script src="angular-1.5.7/angular.js"> </script>
</head>
<body>
<script type="text/javascript">
var app=angular.module('testapp',[]);
app.controller('MyController',function($scope,$setInterval){
$scope.clock = new Date();
var updateClock = function () {
$scope.clock = new Date();
};
$setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
});
</script>
<div ng-controller="MyController">
Hello <span ng-bind="clock"></span>
</div>
</body>
</html>
You forgot to define your module ng-app
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title>Simple App</title>
</head>
<body>
<div ng-controller="MyController">
Hello {{clock}}</span>
</div>
<script src="angular-1.5.7/angular.js"></script>
<script type="text/javascript">
var app = angular.module('demoApp',[]);
function MyController($scope){
$scope.clock = new Date();
var updateClock = function () {
$scope.clock = new Date();
};
$interval(function() {
updateClock();
}, 1000);
updateClock();
};
</script>
</body>
</html>
Doc
Difference between set-interval and $interval
ng-bind has one-way data binding ($scope --> view). It has a shortcut {{ val }} which displays the scope value $scope.val inserted into html where val is a variable name.

How to change the innerHTML content onmouseout in angular

I have to change the content of the button to ON on mouseenter and to OFF on mouseleave using Angular.
<html ng-app="myApp" ng-controller="homeCtrl">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('homeCtrl', function ($scope) {
$scope.alert = function () {
this.myHTML = OFF;
};
$scope.text = function () {
this.myHTML = ON;
};
})
</script>
</head>
<body>
<button ng-mouseenter="alert();" ng-mouseleave="text();"> OFF </button>
</body>
</html>
$scope.alert = function () {
$scope.text = 'OFF';
};
$scope.text = function () {
$scope.text = 'ON';
};
and
<button ng-mouseenter="alert();" ng-mouseleave="text();">{{text}}</button>
Why not use binding instead?
<html ng-app="myApp" ng-controller="homeCtrl">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('homeCtrl', function ($scope) {
$scope.alert = function () {
$scope.value = "OFF";
};
$scope.text = function () {
$scope.value = "ON";
};
$scope.value="OFF"
})
</script>
</head>
<body>
<button ng-mouseenter="alert();" ng-mouseleave="text();"> {{value}} </button>
</body>
</html>

Ember action not connecting to method

I am having a problem which should have a simple solution. For some reason my action helper is not connecting to its method.
Here is my JSBin http://jsbin.com/UMaJaM/5/edit
Code is copied below for reference.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember template" />
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.1.2/ember.js"></script>
</head>
<body>
<div id="main"></div>
</body>
</html>
JavaScript:
var TemplatedViewController = Ember.Object.extend({
templateFunction: null,
context: null,
viewBaseClass: Ember.View,
view: function () {
var controller = this;
var context = this.get('context') || {};
var args = {
template: controller.get('templateFunction'),
controller: controller
};
args = $.extend(context, args);
return this.get('viewBaseClass').extend(args);
}.property('templateFunction'),
appendView: function (selector) {
this.get('view').create().appendTo(selector);
},
appendViewToBody: function (property) {
this.get(property).create().append();
}
});
var template_source = '<button type="button" class="btn" {{action "button"}}>Click</button>';
var MyController = TemplatedViewController.extend({
templateFunction: Ember.Handlebars.compile(template_source),
button: function() {
console.log('hello world');
}
});
var controller = MyController.create();
$(function () {
controller.appendView('#main');
});
You need to create an Ember application. Add this to the beginning of your script:
App = Ember.Application.create();

Categories

Resources