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() {
});
Related
I have been trying to make a angularjs application where I want to route to a different html page on a button click. But is not working for some unknown reasons.
My html code
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Controller">
<h1>Plunkr Example</h1>
<button ng-click="changeview()">ClickMe</button>
<h1>MainPage</h1>
</body>
</html>
My Code
var app = angular.module("app", ['ngRoute'])
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/Details', {
templateUrl: 'details.html'
}).
when('/Main', {
templateUrl: 'main.html'
}).
otherwise({
redirectTo: '/Main'
});
}]);
app.controller("Controller", function($scope,$routeParams,$location){
//$scope.ProductId = $routeParams.id;
$scope.changeview = function () {
console.log('in function changeview');
$location.path('/Details');
}
})
Here is my plunkr
Please help.
You have missed to add the ng-view directive. It needs to be included for the routing to be able to rendered the templates
<div ng-view></div>
Working plunker
You need to have ng-view directive in index.html
<div class="viewWrapper">
<div ng-view></div>
</div>
WORKING DEMO
Hey guys i got a problem with implementing ngDialog in my current project.
For testing i have created following working code:
test.php
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog-theme-plain.min.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.21/angular.js" data-semver="1.2.21"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog.min.js"></script>
<script src="neuejs.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="openDialog($event)">Open Me!</button>
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()" ng-controller="tt">
Bilder
</div>
</script>
</body>
</html>
and in a seperate neuejs.js:
var app = angular.module('myapp', ['ngDialog']);
app.controller('MainCtrl', function($scope, ngDialog) {
$scope.openDialog = function($event) {
var dialog = ngDialog.open({
template: 'templateId',
scope: $scope,
controller: 'FileController',
$event: $event,
className: 'ngdialog-theme-plain'
});
};
});
This works just fine. Exactly what i want.
My existing project has an app.js file with
var iMPULS = angular.module('iMPULS', []);
and the project works fine as well, but if i want to use ngDialog and change the module to:
var iMPULS = angular.module('iMPULS', ['ngDialog']);
the whole layout is kind of messed up, no link in my iMPULS.conf work anymore plus i got "Error: No module: ngDialog" concerning to angular.min.js in Firefox-Browserconsole.
How could this be? I just addes the 'ngDialog' to the module in app.js just like in the testfiles above.
I have the directive that find the elements height and need to have the same value to the controller from the directive.
I tried the below mentioned code and i could not find the solution, am facing some issues.
Could anyone help me on this?
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app="myModule">
<div myDirective style="height: 300px;" ng-controller="myheight">
{{numvalue()}}
</div>
</body>
</html>
script.js for directive
angular.module('myModule', [])
.directive('myDirective', function($timeout) {
return {
restrict: 'A',
link: function(scope, element) {
scope.height = element.prop('offsetHeight');
scope.width = element.prop('offsetWidth');
}
};
})
;
contoller.js for controller
angular.module('myModule', []).controller("myheight", function($scope){
$scope.numvalue = function(){
$scope.divHeight = $scope.height;
return $scope.divHeight;
}
});
You don't need $scope.numvalue();
Your directive looks fine. Just add it to the html and change code to following.
<div ng-app="myModule">
<div style="height: 300px;" my-directive ng-controller="myHeight">
Getting height {{height}}
</div>
</div>
JSFiddle
--EDIT--
Check the updated fiddle
JSFiddle
just expose a varible of controller to the directive. after compilation process of the directive you can access the scope variable divHeight in your controller.
angular.module('myModule', [])
.directive('myDirective', function($timeout) {
return {
restrict: 'A',
scope:{
divHeight: '='
},
link: function(scope, element) {
scope.divHeight = element.prop('offsetHeight');
scope.width = element.prop('offsetWidth');
}
};
});
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app="myModule">
<div myDirective div-Height="divHeight" style="height: 300px;" ng-controller="myheight">
{{numvalue()}}
</div>
</body>
</html>
I am trying to use this plugin http://prrashi.github.io/rateYo/ and for some reason when my artistpage.html page is served up the stars aren't appearing. I know the page is being served up because all other elements in the view appear. Something else that is strange is that when I put <div id="rateYo"></div> in the index.html the plugin works. So I am not really sure why its not working when the view is injected into <div ng-view></div>. Assuming my paths are correct, what could be the problem?
index.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="./lib/jquery.rateyo.css"/>
</head>
<body ng-app='LiveAPP'>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./lib/jquery.rateyo.js"></script>
<script src="/controllers/mainCtrl.js"></script>
<script src="/controllers/signUpCtrl.js"></script>
<script src="/controllers/artistCtrl.js"></script>
<script src="/routes.js"></script>
<script src="./js/stars.js"></script>
</body>
</html>
artistpage.html
<h1>This is a title</h1>
<div id="rateYo"></div>
routes.js
angular.module('LiveAPP', ['ngRoute',
'LiveAPP.main',
'LiveAPP.signUp',
'LiveAPP.artist'])
.config(function($routeProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl : '/home.html',
controller : 'mainCtrl'
})
.when('/signup',{
templateUrl : '/signup.html',
controller : 'signUpCtrl'
})
.when('/artist',{
templateUrl : '/artistpage.html',
controller : 'signUpCtrl'
})
});
stars.js
$(function () {
$("#rateYo").rateYo({
rating: 3.6
});
});
The code in stars.js is evaluated when the document is ready, but jQuery has no knowledge of Angular replacing the view content in ng-view, so it won't attach the rating plugin to any newly added elements. Generally, you want to wrap jQuery plugins in Angular directives so that you can use them the "Angular way." For example:
app.directive("rateYo", function() {
return {
restrict: "A",
scope: {
rating: "="
},
template: "<div id='rateYo'></div>",
link: function( scope, ele, attrs ) {
$(ele).rateYo({
rating: scope.rating
});
}
};
});
Which would be used like this in your view:
<!-- assuming $scope.myRating equals the rating you want to display -->
<div rate-yo rating="myRating"></div>
Code above is untested, but it should give you the gist of it.
I have shown a simplified version of my problem below:
The directive 'name' is not understood when it is in the view 'loginView.html', however it works fine when It's in the main page 'index.html'
loginView.html
<p>Welcome : {{name}}</p>
<input type="text" data-ng-model="name"><br>
<button type="submit" data-ng-click="loginUser()">Login</button>
index.html
<!doctype html>
<html data-ng-app="vla">
<head>
<title>Video Learning application</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class = "navBar">
<div class = "leftButton"></div>
<div class = "title">VLA</div>
<div class = "rightButton"></div>
</div>
<div data-ng-view=""></div>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="controllers/controllers.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var app = angular.module('vla', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/view1',
{
controller: 'controllers/controllers.js',
templateUrl: 'partials/loginView.html'
})
.otherwise({ redirectTo: '/view1' });
});
controller.js
app.controller('loginController', function ($scope)
{
$scope.loginUser = function () {
alert("test");
}
});
The {{name}} just prints itself out when in the view 'loginView', but works fine and prints he contents of the input field when placed into index.html.
I'm very new at this and would appreciate any help.
Thanks in advance
You should write controller name but not path in controller option of routeProvider:
$routeProvider
.when('/view1',
{
controller: 'loginController',
templateUrl: 'partials/loginView.html'
})
.otherwise({ redirectTo: '/view1' });
And attach file with controller (controllers/controllers.js) with tag <script>.
Just realised the problem was the ordering of the script declarations in the index.php page
The app reference should come before the controller:
<script src="app.js"></script>
<script src="controllers/controllers.js"></script>