Is there any way to run an angularjs script when datepicker onSelect method called?
Thanks
Yes, of course it is possible. You could instantiate the datepicker inside the controller.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="jquery-ui.css">
</head>
<body ng-app="DatePickerModule">
<div ng-controller="DatePickerController">
<input id="dateField" />
</div>
</body>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript">
angular.module('DatePickerModule', [])
.controller('DatePickerController', function() {
$('#dateField').datepicker();
});
</script>
</html>
EDIT:
If you would like to use a directive:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="jquery-ui.css">
</head>
<body ng-app="DatePickerApp">
<div>
<input id="dateField" myDirective />
</div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript">
angular.module('DatePickerApp', [])
.directive('mydirective', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
$(function(){
element.datepicker({
onSelect: function() {
alert("Selected");
}
});
});
}
}
});
</script>
</html>
Related
Bootstrap select with data-live-search working fine with normal views but not working as expected with partial view which are rendered within the main view (Index.cshtml)
Bootstrap select with Normal View Bootstrap select with Partial View
I have Index page wherein all the jQuery files are included at the bottom of the page and partial views are rendered based on menu selection. I'm using nested ui-router.
<div class="page-container">
<div class="page-content">
<ui-view></ui-view>
</div>
</div>
<script type="text/javascript" src="~/Scripts/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/bootstrap/bootstrap.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-animate.js"></script>
<script src="~/Scripts/angular-aria.js"></script>
<script src="~/Scripts/angular-loader.js"></script>
<script src="~/Scripts/angular-messages.js"></script>
<script src="~/Scripts/angular-ui-router.js"></script>
<script src="~/Scripts/angular-material.min.js"></script>
<script src="~/Scripts/kendo.all.min.js"></script>
<script src="~/Scripts/angular-kendo.js"></script>
<script src="~/Scripts/angular-datepicker.min.js"></script>
<script src="~/Scripts/angular-cookies.js"></script>
<script type='text/javascript' src='~/Scripts/plugins/icheck/icheck.min.js'></script>
<script src="~/Scripts/angular-datatables.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/scrolltotop/scrolltopcontrol.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/morris/raphael-min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/morris/morris.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/rickshaw/d3.v3.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/rickshaw/rickshaw.min.js"></script>
<script type='text/javascript' src='~/Scripts/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js'></script>
<script type='text/javascript' src='~/Scripts/plugins/jvectormap/jquery-jvectormap-world-mill-en.js'></script>
<script type='text/javascript' src='~/Scripts/plugins/bootstrap/bootstrap-datepicker.js'></script>
<script type="text/javascript" src="~/Scripts/plugins/owl/owl.carousel.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/moment.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/bootstrap/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/bootstrap/bootstrap-timepicker.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/bootstrap/bootstrap-colorpicker.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/bootstrap/bootstrap-file-input.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/bootstrap/bootstrap-select.js"></script>
<script type="text/javascript" src="~/Scripts/plugins/tagsinput/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="~/Scripts/plugins.js"></script>
<script type="text/javascript" src="~/Scripts/actions.js"></script>
<script type="text/javascript" src="~/Scripts/demo_dashboard.js"></script>
we need to create a directive for this, something like below and then call it in our html form by using attribute select-picker
.directive('selectPicker', ['$parse', function ($parse) {
return {
restrict: 'A',
require: ["?ngModel", "?ngCollection"],
priority: 10,
compile: function (tElement, tAttrs, transclude) {
tElement.selectpicker($parse(tAttrs.selectpicker)());
tElement.selectpicker('refresh');
return function (scope, element, attrs, ngModel) {
if (!ngModel) return;
scope.$watch(attrs.ngModel, function (newVal, oldVal) {
scope.$evalAsync(function () {
if (!attrs.ngOptions || /track by/.test(attrs.ngOptions))
element.val(newVal);
element.selectpicker('refresh');
});
});
ngModel.$render = function() {
element.selectpicker("val", ngModel.$viewValue || "");
};
ngModel.$viewValue = element.val();
};
}
};
}])
<div class="form-group">
<label class="col-md-2 col-xs-12 control-label">Bank Short Name</label>
<div class="col-md-6 col-xs-12">
<select class="form-control with-search" select-picker data-live-search="true" title="Select Bank"
ng-model="selectedMasterBank"
ng-options="b as b.shortName for b in masterbanks"
ng-change="onChangeSelectedMasterBank(selectedMasterBank)">
</select>
</div>
</div>
Hello guys for 2 days i am trying to call a react component from html and every time it throw me that error "Error: Cannot find react component MyReact"
so that is my html.I would be very grateful if someone help me
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/datepicker.css">
<link rel="stylesheet" href="css/angular-material.min.css">
<script src="react-15.3.0.js"></script>
<script src="react-dom-15.3.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
</head>
<body ng-app="listOfDiaries" ng-controller="myCtrl as ctrl">
<react-component name="MyReact"></react-component>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-messages.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src = 'js/bootstrap.js'></script>
<script src="js/ngReact.js"></script>
<script type="text/babel" src="tutorial.js"></script>
<script src = 'config.js'></script>
<!--data-toggle="modal" data-target="#{{myprops.id}}"-->
</body>
</html>
that is tutorial file:
var MyReact = React.createClass({
render: function() {
console.log("qweqw");
return(
<div>
<h2>georgi</h2>
</div>
);
}
});
app.value('MyReact',MyReact);
and my config file:
var app = angular.module('listOfDiaries', ['react','ngMaterial','ngMessages']);
app.controller('myCtrl', ["$scope", "myFirstService", function ($scope, myFirstService) {
var self = this;
//and directive and so on..
I don't program Angular; but looking at the code in the app.directive statement; if that code is run immediately MyReact is not defined. Try switch the MyReact class and the app.directive block.
Hi I've been having some problems refactoring my controllers into their own snippets
I want the controllers to inherit the dependencies from my initial app declaration.
"use strict";
angular.module('clockOn', ['angular-contextual-date','logon','milli','mobile','ClockOnController','Auth','ngStorage'])
I need these dependencies to flow through my controllers.
angular.module('clockOn').controller('LogonController', ['$rootScope','$scope','$location','$localStorage','Auth',
function($rootScope, $scope, $location, $localStorage,Auth){
creates unknown provider errors --I'm assuming the dependencies aren't flowing down--
angular.module('clockOn',[]).controller()
creates undefined function 'controllerName' errors -In this scenario I'm assuming I'm redefining the app and hence loosing the other controllers-
Here's two of the controllers
(function (){
angular.module('clockOn',['Auth','angular-contextual-date'])
.controller('ClockOnController', ['$http','Auth','contextualDateService' ,function ($http,Auth,contextualDateService){
this.user = Auth.getTokenClaims().user; //authorised is a property of the controller
contextualDateService.config.fullDateFormats.thisMonth = "MMM d 'at' h:mm a ";
this.shifts = getShifts(this);
function getShifts(clockOnCtrl){
var date = new Date();
var curr_date = Date.now();
var week_from_now = Date.now()+"7";
$http({
method: 'GET',
url: '/shifts',
params: {"user_id":clockOnCtrl.user._id,
"start_at":curr_date,
"finish_at":week_from_now}
}).
then(function(res){
if (typeof res !== 'undefined'){
console.log(res.data);
clockOnCtrl.shifts = res.data;
}},
function(error){
console.log(error)
});
}
}]);
})();
My index file
<!DOCTYPE html>
<html class="container" ng-app="clockOn"> <!-- ng-app tells the html page which app/module it belongs too runs the store module on load-->
<head>
<meta name="viewport" content="width=device-width , initial-scale=1">
<link rel="stylesheet" type="text/css" href="../resources/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../resources/custom.css"/>
</head>
<body>
<script type="text/javascript" src="../resources/jquery.min.js"></script>
<script type="text/javascript" src="../resources/angular.min.js"></script>
<script type="text/javascript" src="../resources/bower_components/angular-contextual-date/dist/angular-contextual-date.js"></script>
<script type="text/javascript" src="../modules/app.js"></script>
<script type="text/javascript" src="../modules/logon.js"></script>
<script type="text/javascript" src="../modules/tasks.js"></script>
<script type="text/javascript" src="../services/milli.js"></script>
<script type="text/javascript" src="../services/auth.js"></script>
<script type="text/javascript" src="../modules/mobile.js"></script>
<script type="text/javascript" src="../modules/shifts.js"></script>
<script type="text/javascript" src="../modules/layout-components.js"></script>
<script type="text/javascript" src="../resources/bower_components/ngstorage/ngStorage.min.js"></script>
<script type="text/javascript" src="../controllers/controller-clockOn.js"></script>
<script type="text/javascript" src="../controllers/controller-logon.js"></script>
<script type="text/javascript" src="../controllers/controller-tasks.js"></script>
<div class="container" ng-controller="ClockOnController as clockOnCtrl">
<div class= "" ng-controller="LogonController as logonCtrl">
<logon-form></logon-form>
<top-menu></top-menu>
<div class="page-header" ng-show="token">
<h2 class="">Welcome {{clockOnCtrl.user.name | uppercase}}
<small>You currently have {{clockOnCtrl.shifts.length}} shifts</small>
<h2>
</div>
<shifts-list></shifts-list>
<custom-footer></custom-footer>
</div>
</div>
</body>
</html>
The error Argument 'ClockOnController' is not a function, got undefined
I have 2 things to do:
custom directive for dropdowns
custom directive for upload
var app=angular.module('app.directives', []);
app.directive('dropdowns', function() {alert("dropdown directive");
return {
restrict: 'AE',
templateUrl: 'html/uploadFile.html'
};
});
app.directive('uploadDir', function() {
alert("upload directive");
return {
restrict : 'AE',
templateUrl : 'html/dropdowns.html'
};
});
The directive for dropdown is working
But the directive for upload is not working(the alert message in uploadDir directive is not getting displayed)
Is the syntax correct?
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="ISO-8859-1">
<title>upload using directive</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="lib/ui-bootstrap-tpls-0.13.0.js"></script>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/controllers.js"></script>
<script type="text/javascript" src="js/services/services.js"></script>
<script type="text/javascript" src="js/directives/directives.js"></script>
</head>
<body>
<div>
<div dropdowns></div>
<div uploadDir></div>
</div>
</body>
</html>
Use <div upload-dir></div>. Directive names in camel case are normalised with dashes when matching against HTML elements.
Why does this not work for me? Based on this question How to Integrate Flot with AngularJS?
All I get is a blank page.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="static/js/angular/angular.min.js"></script>
<script type="text/javascript" src="static/js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="static/js/jquery/jquery-2.1.0.js"></script>
<script type="text/javascript" src="static/lib/flot/controller.js"></script>
<style type='text/css'>
chart {
display:none;
width:400px;
height:200px;
}
</style>
</head>
<body>
<div ng-app='App'>
<div ng-controller='Ctrl'>
<chart ng-model='data'></chart>
</div>
</div>
</body>
</html>
#Controller.js
var App = angular.module('App', []);
App.controller('Ctrl', function ($scope) {
$scope.data = [[[0, 1], [1, 5], [2, 2]]];
});
App.directive('chart', function() {
return {
restrict: 'E',
link: function(scope, elem, attrs) {
var data = scope[attrs.ngModel];
$.plot(elem, data, {});
elem.show();
}
};
});
You included the scripts in the wrong order. It should be jQuery, Flot, and then angular (followed by your controller):
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="flot#*" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script data-require="angular.js#1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
Here is a plunker: http://plnkr.co/edit/WI3lXKRxxEpPvnhHfgrf?p=preview