var myApp = angular.module('myApp',['angular-virtual-keyboard']);
myApp.controller('MyCtrl',MyCtrl);
function MyCtrl($scope) {
document.getElementsByTagName('input')[0].focus();
}
<link href="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.js"></script>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<input type='text' ng-model="textValue" ng-virtual-keyboard/>
</div>
</body>
If I click on input then virtual keyboard is opening. But how can I open the keyboard without click. I tried using input.focus() that didn't work.
Just find a working fiddle Here with an directive auto focus
var myApp = angular.module('myApp',['angular-virtual-keyboard']);
myApp.controller('MyCtrl',function($scope) {
});
myApp.directive('autoFocus', function($timeout) {
return {
restrict: 'AC',
link: function(_scope, _element) {
$timeout(function(){
_element[0].focus();
}, 0);
}
};
});
<link href="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.js"></script>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<input type='text' ng-model="textValue" auto-focus ng-virtual-keyboard/>
</div>
</body>
You are doing change outside angularJS framework, so you need to apply it by $scope.$apply();
var myApp = angular.module('myApp',['angular-virtual-keyboard']);
myApp.controller('MyCtrl',MyCtrl);
function MyCtrl($scope) {
document.getElementsByTagName('input')[0].focus();
$scope.$apply();
}
Related
Hi I am new to Angularjs. I am learning how to share data between two controllers using dataservice. Looking at the tutorial I made my own program but it is not working. Can anyone suggest what I am doing wrong here?
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Services</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
</head>
<body>
<div ng-app="dataServiceApp">
<div ng-controller="ChildCtrl">
<h2>First controller</h2>
<button>+</button>{{Holder.value}}
</div>
<div ng-controller="ChildCtrl2">
<h2>Second controller</h2>
<button>+</button>{{Holder.value}}
</div>
</div>
<script>
var myapp = angular.module("dataServiceApp",[]);
myapp.factory('Holder', function() {
return {
value: 0
};
});
myapp.controller('ChildCtrl', function($scope, Holder) {
$scope.Holder = Holder;
$scope.increment = function() {
$scope.Holder.value++;
};
});
myapp.controller('ChildCtrl2', function($scope, Holder) {
$scope.Holder = Holder;
$scope.increment = function() {
$scope.Holder.value++;
};
});
</script>
</body>
</html>
You have forgotten to register onclick listeners to the buttons:
<button ng-click="increment()">+</button>{{Holder.value}}
Hope this helps. Complete working example below:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Services</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
</head>
<body>
<div ng-app="dataServiceApp">
<div ng-controller="ChildCtrl">
<h2>First controller</h2>
<button ng-click="increment()">+</button>{{Holder.value}}
</div>
<div ng-controller="ChildCtrl2">
<h2>Second controller</h2>
<button ng-click="increment()">+</button>{{Holder.value}}
</div>
</div>
<script>
var myapp = angular.module("dataServiceApp",[]);
myapp.factory('Holder', function() {
return {
value: 0
};
});
myapp.controller('ChildCtrl', function($scope, Holder) {
$scope.Holder = Holder;
$scope.increment = function() {
$scope.Holder.value++;
};
});
myapp.controller('ChildCtrl2', function($scope, Holder) {
$scope.Holder = Holder;
$scope.increment = function() {
$scope.Holder.value++;
};
});
</script>
</body>
</html>
p.s. I also fully agree with JB Nizet's comment: check whether you really need to learn AngularJS instead of Angular 2-7/VueJS/React.
I am trying to use this jQuery Plugin Date and Time Picker in my Angularjs project to receive date from a user in a form.
<html>
<head>
<title>Datetime picker</title>
<link href="bootstrap.min.css" rel="stylesheet" >
<link href="jquery.datetimepicker.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<input type="text" id="datetimepicker" class="form-control">
</form>
</div>
<script src="jquery-3.1.1.min.js" ></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.datetimepicker.full.js"></script>
</body>
<script type="text/javascript">
$('#datetimepicker').datetimepicker();
</script>
</html>
So, when I click on the form, the datetime widget appears quite alright. At this point I have not used any Angularjs.
Now I want to do this with Angularjs and this is the attempt I've so far made:
<html ng-app="myApp">
<head>
<title>Datetime picker</title>
<link href="bootstrap.min.css" rel="stylesheet" >
<link href="jquery.datetimepicker.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-view></div>
<script src="angular.min.js" ></script>
<script src="ngRoute.js" ></script>
<script src="app.js" ></script>
<script src="jquery-3.1.1.min.js" ></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.datetimepicker.full.js"></script>
</body>
<script type="text/javascript">
$('#datetimepicker').datetimepicker();
</script>
</html>
here is my app.js file:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/datetime', {
templateUrl: 'admin/date.html',
controller: 'DateTimeController'
})
.otherwise({
redirectTo: "/"
});
});
myApp.controller('DateTimeController', ["$scope", function($scope){
}]);
according to my routes, when I get /datetime in the url, the date.html partial is rendered; Here is the code for the date.html partial:
<div ng-controller="DateTimeController">
<input type="text" id="datetimepicker" class="form-control">
</div>
When I did this, I expected the date/time widget to appear but it didn't. So I began searching for solutions. The best solution I found suggested that I use angular directives. According to this solution, I made the following changes:
I created a custom directive date-time and here is the code in my app.js file:
// ...
myApp.directive('dateTime', function () {
return {
template:'<input type="text" id="datetimepicker" class="form-control">',
restrict: 'E',
link: function (scope, element, attr) {
$('#datetimepicker').datetimepicker();
}
};
});
and the date.html partial now looked like this:
<div ng-controller="DateTimeController">
<date-time></date-time>
</div>
At this point I was confident that it will work but it didn't.
What am I doing wrong? Is there a better way of doing this?
Thanks for any help.
Hard to say exactly what is wrong because there seem to be multiple iterations of your code here, and it's not clear how all of them have changed over time. Having said that, there's no reason that this shouldn't work-- it's working fine for me in this Plunker. You should be able to take a look and see what you're doing differently.
var app = angular.module('plunker', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/datetime', {
templateUrl: 'date.html',
controller: 'DateTimeController'
})
.otherwise({
redirectTo: "/"
});
});
app.directive('dateTime', function () {
return {
template:'<input type="text" id="datetimepicker" class="form-control">',
restrict: 'E',
link: function (scope, element, attr) {
$('#datetimepicker').datetimepicker();
}
};
});
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
app.controller('DateTimeController', function() {
});
When I click the checkbox, the $scope.$watchCollection('classes' does not fire. Any suggestions?
<div class="filter-column">
<div class="filter-title">Class</div>
<div class="bottom-line"></div>
<div class="overflow-container">
<div ng-repeat="class in classes | orderBy">
<input type="checkbox"
ng-model="class.checked" >
{{class.description}}
</div>
</div>
</div>
$scope.$watchCollection('classes', function(newValue) {
console.log('sss')
});
To fixed your code, follow answer from #Sajeetharan for deep watch collection. But I think ng-change should be used in your case to capture event
<input type="checkbox" ng-model="class.checked" ng-change="chkChecked(class);"> {{class.description}}
You can have a deepwatch in that case,
$scope.$watch(function($scope) {
return $scope.classes.
map(function(obj) {
return obj.checked
});
}, function(newVal) {
$scope.checked = true;
alert("css chagned");
}, true);
DEMO
// Code goes here
angular
.module('myApp', [])
.controller('testController', ['$scope',
function($scope) {
$scope.classes = [{
description: 'label1',
}, {
description: 'label2',
}];
$scope.$watch('classes', function(newValue) {
console.log("watcher called");
}, true);
}
]);
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body data-ng-controller="testController">
<div class="filter-column">
<div class="filter-title">Class</div>
<div class="bottom-line"></div>
<div class="overflow-container">
<div ng-repeat="class in classes | orderBy">
<input type="checkbox" ng-model="class.checked" ng-change="call(class)">{{class.description}}
</div>
</div>
</div>
</body>
</html>
$watch is able to get the changes.
I am not familiar with angular js for doing demo about autocomplete on angular js; it getting error about autocomplete is not functiion; see below code:
<html>
<head>
<title>Autocomplete Demo</title>
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/autocomplete.css">
</head>
<body>
<header>
<h1><span class="thin">AngularJS:</span> - Demo</h1>
</header>
<div ng-app='MyModule'>
<div ng-controller='DefaultCtrl'>
<input type="text" ng-model="foo" auto-complete /> Foo = {{foo}}
</div>
</div>
<footer>
made by
</footer>
<script src="scripts/angular.min.js"></script>
<script type="text/javascript">
angular.module('MyModule', []).controller('DefaultCtrl', ['$scope', function($scope) {}])
.factory('autoCompleteDataService', [function() {
return {
getSource: function() {
return ['apples', 'oranges', 'bananas'];
}
}
}])
.directive('autoComplete', function(autoCompleteDataService) {
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
elem.autocomplete({
source: autoCompleteDataService.getSource(),
minLength: 2
});
}
};
});
</script>
I have tried my best and surfing on the google as well as stackoverflow but I didn't get the solution.
See error image autocomplete is not a function :
I try to implement a tooltip with angularjs template inside. For this, I use "uib-tooltip-html" and I add an attribute on the element to compile the template. But it doesn't work.
Here is the code
Here is the plunker
http://plnkr.co/edit/y1TvogsFFBoBVra3gO3F?p=preview
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title>uib-tooltip-html test</title>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-sanitize.min.js"></script>
<script>
var app = angular.module("test", ['ngSanitize','ui.bootstrap']).config(function($sceProvider) {
$sceProvider.enabled(false);
});
app.controller("testController", function($scope, $http, $interval, $sce) {
$scope.text = $sce.trustAsHtml('<table><tr ng-repeat="x in [1,2,3]"><td>{{ x }}</td></tr></table>');
});
app.directive('compileTemplate', function($compile, $parse){
return {
link: function(scope, element, attr){
var parsed = $parse(attr.uibTooltipHtml);
console.log(attr.uibTooltipHtml);
function getStringValue() { return (parsed(scope) || '').toString(); }
console.log(getStringValue())
//Recompile if the template changes
scope.$watch(getStringValue, function() {
console.log('ca passe');
$compile(element, null, -9999)(scope); //The -9999 makes it skip directives so that we do not recompile ourselves
});
}
}
});
</script>
</head>
<body>
<div ng-app="test" ng-controller="testController">
<p style="margin-top: 5em;" uib-tooltip="Some text" >
A Thing With a Tooltip
</p>
<p style="margin-top: 5em;" uib-tooltip-html="text" compile-template>
A Thing With an HTML Tooltip
</p>
</div>
Thank you in advance for your answer
You can use uib-tooltip-template like this:
<p style="margin-top: 5em;" uib-tooltip-template="'myTooltipTemplate.html'">
A Thing With an HTML Tooltip
</p>
And then in put your html in myTooltipTemplate.html:
<table><tr ng-repeat="x in [1,2,3]"><td>{{ x }}</td></tr></table>
The template goes in a separate file.
documentation: https://angular-ui.github.io/bootstrap/#/tooltip
plnkr: http://plnkr.co/edit/tiCHpd0LipixXbO4Xfa5?p=preview