Dans un projet, un contrôle est nécessaire pour entrer des minutes et des secondes, mais après avoir enquêté sur certains projets open source, aucun contrôle approprié n'est trouvé. Il y a un calendrier de contrôle similaire dans l'interface utilisateur de bootstrap angulaire, mais il ne va pas profondément en minutes et en secondes.
Par conséquent, il est décidé de se référer à son code source et de l'implémenter vous-même.
L'effet final est le suivant:
La première est la définition de la directive:
app.directive ('minutesCondpicker', function () {return {restrict: 'ea', require: ['MinuchSecondPicker', '? ^ ngmodel'], contrôleur: 'MinuchSecondPickerController', remplacer: true, portée: {validité: '='}, templateur: 'partiels / directeurs élément, attrs, ctrlS) {var minutesCondPickerctrl = ctrls [0], ngmodelctrl = ctrls [1];Dans la fonction de liaison ci-dessus, Ctrls est un tableau: Ctrls [0] est l'instance de contrôleur définie sur cette directive, et Ctrls [1] est ngmodelctrl, c'est-à-dire l'instance de contrôleur correspondant au modèle ng. Cet ordre est en fait défini par l'exigence: ['minutesCondpicker', '? ^ Ngmodel'].
Notez que la première dépendance est le nom de la directive elle-même, et l'instance correspondante déclarée par le contrôleur de la directive sera transmise. La deuxième dépendance est écrite un peu étrange: "? ^ Ngmodel", le sens de? est que même si la dépendance n'est pas trouvée, ne lancez pas d'exception, c'est-à-dire que la dépendance est une option facultative. Le sens de ^ est de trouver le contrôleur de l'élément parent.
Ensuite, définissez certains paramètres par défaut utilisés dans cette directive et implémentez-les via une directive constante:
app.Constant ('MinutesCondPickerConfig', {MinuteStep: 1, SecondStep: 1, ReadOnlyInput: False, Mousewheel: true});Ensuite, le contrôleur correspondant de directive, qui est déclaré comme suit:
app.Controller ('MinthingECondPickerController', ['$ scope', '$ attrs', '$ parse', 'MinthtureConDPickerConfig', fonction ($ scope, $ attrs, $ parse, MinthtureConDPickerConfig) {...}]);Dans la fonction de liaison directive, la méthode init de ce contrôleur est appelée:
this.init = function (ngmodelctrl_, entrées) {ngmodelctrl = ngmodelctrl; ngmodelctrl. $ render = this.render; var minutesInputel = input.eq (0), secondsInputel = input.eq (1); var muousewheel = angular.isdefined ($ attrs.wheel)? $ Scope. $ parent. $ eval ($ attrs.Mousewheel): MinthingEConDPickerConfig.Mousewheel; if (mousewheel) {this.setupMousewheelEvents (MinthingInPutel, SecondSInPutel); } $ scope.readonlyInput = angular.isdefined ($ attrs.readonlyInput)? $ scope. $ parent. $ eval ($ attrs.readonlyInput): MinutesConDPickerConfig.ReadonlyInput; this.setupInPutevents (MinuchInPutel, SecondSinPutel); };Le deuxième paramètre accepté par la méthode init est des entrées, et celle transmise dans la fonction de liaison est: élément.find ('entrée'). Ainsi, la première boîte d'entrée est utilisée pour entrer les minutes et la deuxième boîte d'entrée est utilisée pour entrer des secondes.
Ensuite, vérifiez si l'attribut de la roue de souris est écrasé. S'il n'y a pas d'écriture, utilisez la volonté de souris par défaut Constante et faites les paramètres pertinents comme suit:
// répond sur la roue de souris Spin this.SetUpMousewheelEvents = Fonction (minutesInPutel, SecondSinPutel) {var IsscrolLingUp = function (e) {if (e.originalevent) {e = e.originalevent; } // Choisissez la variable delta correcte en fonction de l'événement var delta = (e.wheeldata)? e.wheeldata: -e.deltay; return (e.detail || delta> 0); }; minutesInputel.bind ('Mousewheel Wheel', fonction (e) {$ scope. $ applique ((IsscrolLingUp (e))? $ scope.incrementMinutes (): $ Scope.DecmentMinutes ()); e.PreventDefault ();}); SecondSInPutel.Bind ('Mousewheel Wheel', fonction (E) {$ Scope. $ Apply ((IsscrolLingUp (E))? $ SCOPE.InCrementsEconds (): $ Scope.DecrementsEconds ()); e.PreventDefault ();}); };La méthode init fera enfin des paramètres pour les entrées elle-même:
// répond sur l'entrée directe this.SetUpInputeVants = fonction (minutesInPulel, SecondSInPutel) {if ($ scope.readonlyInput) {$ scope.updateminutes = angular.noop; $ scope.updatesCondes = angular.noop; retour; } var invalidate = function (invalidMinutes, invalidsEcondes) {ngmodelctrl. $ setViewValue (null); ngmodelctrl. $ setValidité («temps», false); $ scope.validité = false; if (angular.isdefined (invalidMinutes)) {$ scope.invalidMinutes = invalidMinutes; } if (angular.isdefined (invalidsEcondes)) {$ scope.invalidsEcondes = invalidsEconds; }}; $ scope.updateMinutes = function () {var minutes = getMinUtesFromTemplate (); if (angular.isdefined (minutes)) {selected.Minutes = minutes; actualiser («m»); } else {invalider (true); }}; MinuchInPutel.Bind ('Blur', fonction (e) {if (! $ Scope.InvalidMinutes && $ Scope.Minutes <10) {$ Scope. $ Apply (function () {$ scope.minutes = pad ($ scope.minutes);});}}); $ scope.updatesEconds = function () {var seconds = getSecondsFromTemplate (); if (angular.isdefined (secondes)) {selected.seconds = seconds; actualiser («s»); } else {invalidate (undefined, true); }}; secondsInPutel.bind ('blur', function (e) {if (! $ Scope.invalidsEconds && $ scope.seconds <10) {$ scope. $ applique (function () {$ scope.seconds = pad ($ scope.seconds);});}}); };Dans cette méthode, une fonction invalidate est déclarée pour définir l'entrée illégale, qui expose une validité = fausse propriété dans la portée pour donner à la page une chance de répondre de manière appropriée.
Si l'utilisateur utilise une variable pour représenter MinuteStep ou SecondStep, les observateurs correspondants doivent être définis:
var MinuteStep = MinutesConDPickerConfig.MinuteStep; if ($ attrs.minuteStep) {$ scope.parent. $ watch ($ parse ($ attrs.minuteStep), fonction (valeur) {MinuteStep = paSeInt (valeur, 10);}); } var secondeStep = minutesCondPickerConfig.SecondStep; if ($ att.secondStep) {$ scope.parent. $ watch ($ parse ($ att.secondStep), function (value) {SecondStep = paSeInt (valeur, 10);}); }Le code d'implémentation de directif complet est le suivant:
var app = angular.module ("KidsEncondPickerDemo"); app.Directive ('MuricterSecondPicker', function () {return {restrict: 'ea', exiger: ['MinuchleConDpicker', '? ^ ngmodel'], contrôleur: ' 'Partials / Directives / MinthingEConDPicker.html', Link: Fonction (Scope, Element, Attrs, CtrlS) {var MinthingEConDPickerCtrl = Ctrls [0], ngModelCtrl = CtrlS [1]; element.find ('input'));}}}}};}); app.Constant ('MotherCondPickerConfig', {MinuteStep: 1, SecondStep: 1, ReadOnLyInput: False, Mousewheel ', [' $ SCOPE ',' $ attir ', $ Prencolle', [$ SCOPE ',' $ préjudici 'MinthingEcondPickerConfig', fonction ($ scope, $ attrs, $ parse, minutesCondPickerConfig) {var sélectionné = {Minutes: 0, seconds: 0}, ngmodelctrl = {$ setViewValue: angular.Noop}; ngmodelctrl_; ngmodelctrl. $ render = this.render; if (Mousewheel) {this.setupMouseWeelEvents (MinuchInPutel, SecondSinPutel);} $ Scope.ReadonlyInput = Angular.isdefined ($ att.readonlyInput)? SecondSInputel);}; if ($ att.secondStep) {$ scope.parent. $ watch ($ parse ($ att.secondStep), function (valeur) {SecondStep = parseInt (valeur, 10);}); if (e.originalevent) {e = e.originalevent;} // Choisissez une variable delta correcte en fonction de l'événement var delta = (e.wheeldata)? $ scope.incrementMinutes (): $ scope.decmentMinutes ()); e.PreventDefault ();}); E.PreventDefault ();});}; InvalidsEcondS) {ngmodelctrl. $ setViewValue (null); ngmodelctrl. if (Angular.Sefined (invalidsEnconds)) {$ scope.InvalidsEcond = invalidsEnconds; }}. getSecondsFromTemplate (); $ scope. $ appliquer () {$ scope.second = pad ($ scope.second);});}}); ngmodelctrl. $ Modelvalue.second}: null; Math.floor (totalsecondes / 60), TOTALSECTIONNEMENTS 60}; Sélectionné. secondes = Sélectionné. GetMintuesFromTemplate () {Var Minking = PARSEIT ($ SCOPE.MINUSE, 10); $ scope.incrementMinutes = Fonction AddSeconds (-secondStep);}; $ scope.previewtime = fonction (minutes, secondes) {var totalseconds = parseInt (minutes, 10) * 60 + parseInt (secondes), mm = pad (minutes% 60), ss = pad (secondes);Implémentation de modèle correspondante:
<Bile> <Tbody> <Tr> <Td> <A ng-Click = "IncmenmentMinutes ()"> <span> </span> </a> </td> <td> </td> <pd> <a ng-Click = "IncrementsCondes ()"> <pan> </pan> </a> </td> <td> </td> ng-class = "{'has-error': invalidMinutes}"> <input type = "text" ng-model = "Minthing" ng-change = "updateMinutes ()" ng-muousewheel = "incrémentMinutes ()" "ng-readonly =" readOnlyInput "maxLength =" 3 "> </td> <td> ng-class = "{'has-error': invalidseconds}"> <input type = "text" ng-model = "seconds" ng-change = "updatesEconds ()" ng-souriswheel = "incrementsEconds ()" ng-readonly = "ReadOnlyInput" maxLength = "2"> <td> <! ng-show = "Validity"> {{PreviewTime (Minutes, secondes)}} </span> </td> </tr> <tr> <td> <a ng-Click = "DecmenmentMinutes ()"> <span> </span> </a> </td> <td> </td> <td> <a ng-Click = "DecrectEConds ()"> " <span> </span> </a> </td> <td> </td> </tr> </ tbody> </s table>Code de test (c'est-à-dire le code source de la boîte de dialogue prise dans la capture d'écran précédente):
<div> <h3> en surbrillance sur <span> {{moviename}} </span> </h3> </div> <div> <div> <div id = "highlight-start"> <h4> Time: </h4> <Minute-Second-Picker ng-model = "starttime" validité = "starttime-end"> </prick-secte <h4> Temps de fin: </h4> <minute-second-picker ng-model = "endtime" validity = "endtimevalidity"> </ minute-cend-picker> </div> </div> <div> <div> Tags: </div> <div> <tags model = "tags" src = "s comme s.name for s in sorsags" options = "{addable:" s comme s.name for s dans SourceTags " } "> </ tags> </ div> </ div> </div> <div> <bouton ng-click =" ok () "ng-disabled ="! startTimeValidité ||! starttime) "> ok </ bouton> <bouton ng-click =" annuler () "> annuler </ftont> </div>Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.