Je souhaite utiliser angulairejs et my97datepicker pour créer quelque chose. J'ai écrit une directive pour synchroniser la valeur avec la portée après avoir cliqué pour sélectionner l'heure. La description est un peu confuse, jetez un ?il au code principal?:
javascript
var datepicker=angular.module("datepicker",[]); datepicker.controller("datepickerCtrl",function($scope){ $scope.date="2014-10-14"; }); datepicker.directive("datePicker",function(){ return { restrict:"A", link:function(scope,element,attr){ element.bind("click",function(){ window.WdatePicker(); }); //問題在這里,無法取到變化的值,而且加上這個,連初始的值都無法顯示出來。 scope.$watch(attr.value,function(newVal){ scope.date=newVal; }); } }; });
Adresse en ligne : http://jsfiddle.sinaapp.com/4zz6nvadg/embedded。初學angularjs,每次寫directive都是卡在$watch這里。
Je ne sais pas comment le résoudre, car je n’ai jamais utilisé le plug-in que vous avez utilisé et je n’ai pas le temps de l’étudier maintenant. Mais je peux vous dire où est le problème, et vous pouvez essayer de trouver une solution vous-même. Jetez d'abord un ?il à la capture d'écran?:
$watch
code associé pour garantir que le plug-in s'exécute correctement2014-10-14
appara?t-il dans le DOM?? $watch
, vous surveillez attr.value
Cependant, selon la capture d'écran, vous pouvez constater que la date définie par le plug-in n'est pas du tout enregistrée ici input[value]
est une valeur nulle. de toute fa?on input[value]
$watch
, c'est pourquoi même model
devient invalide après l'ajout de la partie $watch
. model
, soit à l'inverse, trouvez le bon endroit pour obtenir la valeur et allez sur input[value]
. la méthode spécifique vous-même. La documentation ou le code source du plug-in. $watch
. ??>
var datepicker=angular.module("datepicker",[]);
datepicker.controller("datepickerCtrl",function($scope){
$scope.date="2014-10-14";
});
datepicker.directive("datePicker",function(){
return {
restrict:"A",
link:function(scope, element, attr){
element.bind("click", function () {
window.WdatePicker({
onpicked: function () {
scope.$apply(scope.date = this.value);
}
});
});
}
};
});
$watch
Démo?: http://jsfiddle.sinaapp.com/4zz6n9usy
Si vous souhaitez utiliser
, vous pouvez l'écrire comme ceci?:
var datepicker=angular.module("datepicker",[]);
datepicker.controller("datepickerCtrl",function($scope){
$scope.date="2014-10-14";
});
datepicker.directive("datePicker",function(){
return {
restrict:"A",
link:function(scope, element, attr){
element.bind("click", function () {
window.WdatePicker({
onpicked: function () { scope.$digest(); }
});
});
scope.$watch(
function () { return element[0].value },
function (newValue) { scope.date = newValue; }
);
}
};
});
$watch
Démo?: http://jsfiddle.sinaapp.com/4zz6n9t9q
Notez que le premier paramètre ici ne peut pas être directement
, car cette valeur est une cha?ne primitive, pas un objet encapsulé par angulaire, vous devez donc utiliser une fonction getter pour l'obtenir explicitement, sinon vous ne pouvez pas obtenir il de.
element[0].value
Et vous devez compter sur la fonction de rappel du plug-in pour ce faire
ne se mettra pas à jour automatiquement. On peut voir que le premier exemple est plus simple et offre de meilleures performances. scope.$digest()
Je ne sais pas pourquoi il est utilisé de cette manière. Ici, vous devez clarifier un concept. Les propriétés et la portée sont différentes. Si vous souhaitez lier la valeur de la propriété à la portée, vous devez déclarer la portée dans le fichier. directive. Il y a trois manières?:
Selon votre réflexion, cela peut être de la manière suivante?:
scope: {
value: '=value'
}
Mais même si la liaison est effectuée, vous devez comprendre que le changement de valeur de cet élément n'est pas surveillé par Angular par défaut 這個綁定只是說要去綁定這個屬性值對應的變量
Bien s?r, il est impossible de regarder le changement de valeur.
En fait, utiliser ng-model et ng-change suffit.
?a pourrait finir comme ?a?:
<input ng-model="date" date-picker />
Je n'ai pas trouvé la documentation détaillée du lien et je ne sais pas comment utiliser attr, mais je pense que vous pouvez essayer de $watcher la valeur de l'élément.
Comme pour les deux personnes ci-dessus, la portée de la directive est son $scope, et attr est un paramètre dans le lien et n'a pas besoin d'être défini séparément.
Bonjour l'affiche, comment résoudre ce problème au final ? La valeur obtenue par ng-model est-elle toujours indéfinie