9
votes

Entrée de matériau angulaire ne montrant pas de valeur lorsqu'il n'est pas concentré

J'utilise des matériaux angulaires 1.0.3 et sont correctement définis mais leurs valeurs sont visibles si je clique sur un pour la concentrer. Une fois que ce n'est pas axé, je ne peux pas voir la valeur.

Le marquage est comme suit: xxx

Après vérification s'il s'agit d'un problème de CSS, j'ai constaté que le suivant le sélecteur CSS tourne couleur dans transparent : xxx

et évidemment, il semble que l'entrée n'a pas La classe .md-entrées-entrées-as-valeurs CSS classe.

Pour l'instant, je ne peux pas comprendre ce qui ne va pas.

Info supplémentaire

Dans mon cas, dans le contraire des démos de matériaux angulaires, les contrôleurs sont sur des directives et des états de routeur d'interface utilisateur.

En fait, je peux confirmer que j'ai déjà copié - collé - collé le même balisage dans mon index.html comme enfant direct de < / code> et ensuite cela fonctionne comme prévu.

peut-être qu'il a une relation avec ce numéro ouvert: Compilation de directives de matériau à la volée: Attribut MD-INPUT-HAS-VALUE non défini # 3017 .

< / code> a le MD-INPUT-ART-VALUE-VALUE CSS Classe

J'ai également vérifié que a le MD-INPUT-AS-A-VALUE CSS Classe.


17 commentaires

Pouvez-vous poster un violon? De ces 4 rangées, il est difficile de dire ce qui ne va pas.


Pouvez-vous partager une démo CodePen ou Plunkr? Avez-vous modifié le thème par défaut et implémenté une palette personnalisée?


Pourriez-vous fournir le code complet? (y compris le contrôleur angulaire, le HTML où votre contrôleur est défini, etc.)


@Rayondabre Ugh, je crois qu'il serait difficile de faire travailler le code dans un Codepen / Plunkr, car je développe un spa utilisant ES2015 +, JSPM, SystemJs, Babel ..........


En réalité, le problème est reproduit lorsque je ne lie pas l'entrée au contrôleur


@Chirac Ce n'est pas une petite application angulaire, il serait difficile de le reproduire en ligne uniquement pour cette partie du code


Vous pouvez vérifier ma mise à jour où j'ai trouvé que c'est un problème de CSS


@ Matíasfidemraizer, il serait plus difficile de déboguer cela sans le reproduire. Il fonctionne bien ici: matériau.angularjs.org/latest/demo/input


@Rayondabre je sais que cela fonctionne dans des démos. Chaque jour, j'essaie d'utiliser 10% de mon temps pour surmonter cette question et je ne trouve pas pourquoi il se passe réellement


@Rayondabre Il existe une "petite" différence entre les démos et mon cas: les contrôleurs sont configurés dans les états de routeur d'interface utilisateur, ou le contrôleur est celui fourni dans une directive. Peut-être qu'il y a un bug avec ce cas d'utilisation, qui sait


@Rayondabre vérifier ma dernière mise à jour.


Ne peut pas vous aider sans savoir ce qui se passe!


@Rayondabre J'ai ajouté une réponse qui ne résout pas le problème du tout, mais enfin, le problème est chrome!


@Rayondabre J'utilise si tous les jours et je sais que nous avons tendance à demander un "échantillon de code de travail", mais tous les problèmes ne sont pas résolus avec des échantillons: D


Mais du moins, il faut un moyen de déboguer le problème :)


@Rayondabre Argh, enfin Chrome a toujours des problèmes. Lorsque les intrants font partie d'une directive, je rencontre toujours le problème, tandis que les entrées dans des vues comme sont fonctionnent correctement. Et d'autres navigateurs travaillent parfaitement ...


@ Matíasfidemraizer Avez-vous déjà trouvé une solution? Il suffit de courir dans le même problème et a également constaté que c'était à cause de: non (MD-INPUT-A-VALUE) exécutant la couleur: transparent même si l'objet parent (conteneur d'entrée MD) a la classe


4 Réponses :


0
votes

Enfin j'ai fait quelque chose que je devrais faire il y a une semaine: essayez la même application sur d'autres navigateurs Web forts>.

exactement le même code dans Firefox, Internet Explorer 11 et Edge fonctionne comme prévu: Ne souffre pas de la question expliquée dans ma question. P>

La blague Voici un simple extrait de blague ne démontre pas le problème, car avec ce simple balisage chrome 47 retourne 0 nœuds lors de la requête du sélecteur en utilisant document.Quiseryselectorallall code>. Dans mon balisage réel, il trouve l'élément entier. P>

p>

<md-input-container class="md-input-has-value">
  <label>Some label</label>
  <input ng-model="model.someProperty">
</md-input-container>

<div id="result"></div>


2 commentaires

Si vous ne l'avez pas déjà fait, vous devez absolument poster cela comme un bogue sur notre problème de suivi ( Github.com/ Angulaire / Matériel / Problèmes ) afin que nous puissions enquêter.


Ouais, je vois ça. Les intrants à l'intérieur des directives sont toujours affectés par le problème ... :(



1
votes

Version en matériau angulaire - V1.0.1-MASTER-EDFE2AD

Juste souscrit pour aider à mettre cette question à mettre ce problème.

Aller au fichier angulaire-matériau.css et modifier ceci (pour Mon est la ligne 11 334) xxx

couleur noir et alto fixe ....


0 commentaires

5
votes

Ce problème peut également se produire lorsque vous nichez MD-entrée-conteneur code> comme ceci:

<md-input-container class="md-block">
    <md-input-container class="md-block">
        <label>Some label</label>
        <input ng-model="model.someProperty">
    </md-input-container>
</md-input-container>


1 commentaires

Explication: Lorsque vous ajoutez une valeur, il ajoute la classe = "MD-INPUT-HAS-A-VALUE" sur le conteneur d'entrée MD d'emballage. Si votre entrée est enveloppée par une autre, elle ne recevra pas cette classe et comme une sous-séquence, le texte deviendra transparent



0
votes

Je travaillais sur certains champs de saisie et je suis confronté au même problème. Veuillez vérifier votre code et vous assurer que vous n'utilisez pas de conteneur d'entrée dans un autre conteneur d'entrée tel que

<md-input-container class="md-input-has-value">
   <label>Some label</label>
   <input ng-model="model.propertyName">
</md-input-container>


0 commentaires