javascript - AngularJS: Render own module more than once -
i've been exploring angularjs few days now, , thought of creating datepicker. bumpted onto few things aren't clear me yet. @ first, code wrote datepicker:
angular.module('datepicker', []).directive('mydatepicker', function() { return { scope: { clickcallback: '&', options: '=' }, restrict: 'e', templateurl: 'datepicker.php', link: function($scope, $element, $attr) { $scope.day = 0; $scope.month = 0; $scope.year = 0; $scope.years = []; $scope.days = []; $scope.months = getstandardmonths(); $scope.init = function() { (var = 1; <= 31; i++) $scope.days.push({ value: i, text: (i < 10) ? "0" + : }); $scope.days.unshift({ value: 0, text: "--" }); $scope.months.unshift({ value: 0, text: "--" }); var year = new date().getfullyear(); var start = year + 3; var end = year - 50; (var j = start; j >= end; j--) { $scope.years.push({ value: j, text: j }); } $scope.years.unshift({ value: 0, text: "--" }); } $scope.update = function() { var last = 32 - new date($scope.year, $scope.month - 1, 32).getdate(); if ($scope.day > last) { $scope.day = last; } last++; if ($scope.days.length > last) { var shrink = $scope.days.length - last; $scope.days.splice(last, shrink); } else { (var = $scope.days.length; < last; i++) $scope.days.push({ value: i, text: }); } if ($attr.partial) { $scope.dism = !($scope.year); $scope.disd = !($scope.month); if (!$scope.year) { $scope.disd = true; $scope.day = $scope.month = 0; } if (!$scope.month) { $scope.day = 0; } } } $scope.disd = $scope.dism = ($attr.partial === undefined) ? false : $attr.partial; $scope.init(); } }; }); this template wrote in order render datepicker module:
<select ng-model="day" ng-options="d.value d.text d in days" ng-visible="!disd"> </select> <select ng-model="month" ng-options="m.value m.text m in months" ng-change="update()" ng-visible="!dism"></select> <select ng-model="year" ng-options="y.value y.text y in years" ng-change="update()"></select> and usage, straight-forward:
<my-datepicker partial="true" /> now, when copy line above several times, still renders single datepicker control (no multiple datepickers shown on html page). can't seem understand why, if shed light here, i'd grateful.
i have list of different items, own date. next step bind date in list object function inside datepicker.
note: partial attribute allow user not fill in full date year or year , month.
i fixed own issues reading little more angularjs. mind twisted in traditional javascript way of coding. in case else has problem, here fixed code. code below renders multiple instances of datepicker directive:
<div ng-controller="datepickercontroller" class="md"> <p><b>datepicker (partial)</b></p> <div ng-repeat="d in dates" ng-include src="'dateitem.php'" ></div> <br /><br /> <p><b>datepicker (non partial)</b></p> <select ng-model="selecteddate" ng-options="d d.desc d in dates"></select> {{selecteddate}}<br/> <my-datepicker ng-model="selecteddate.date"></td-datepicker> </div> i use ng-model "bind" mysql formatted date string.
scope: { clickcallback: '&', options: '=', ngm: '=ngmodel' }, require: 'ngmodel', and these dates need shown datepicker object:
function datepickercontroller($scope) { 'use strict'; $scope.dates = [ { date: "2008-04-02", desc: "full date" }, { date: "2010-02-00", desc: "missing day date" }, { date: "1999-00-00", desc: "missing month date" }, { date: "0000-00-00", desc: "empty date" } ]; // non partial shizzle $scope.selecteddate = $scope.dates[0]; } live example of datepicker: http://sandbox.matvp.info/angularjs/?datepicker
Comments
Post a Comment