La Conception de matériel Lite Intégration avec AngularJS

Je suis conscient de Angulaire Du Matériel qui permet de mettre en œuvre le Matériel de spécification de Conception pour une utilisation dans Angulaire d'une seule page des applications.

Je suis cependant en prenant un coup d'oeil à La Conception De Matériel Lite alternative à l'intégrer à mon Angulaire du projet. J'aimerai savoir la meilleure façon d'aller sur l'intégration de la Conception de Matériel Lite et AngularJS app.

  • getmdl.io/started/index.html
  • Selon la Conception de Matériel Lite, l'avantage est que vous n'avez pas besoin de bibliothèques JavaScript pour que cela fonctionne, si vous êtes déjà en utilisant AngularJS pourquoi ne pas simplement utiliser Angulaire du Matériel?
  • Même si il utilise Angulaire, il pourrait avoir besoin d'une petite bibliothèque d'INTERFACE utilisateur. Vérifier ma réponse pour plus de détails
InformationsquelleAutor dantheta | 2015-07-07
  1. 31

    Emjay deuxième réponse a fonctionné pour moi. Vous pouvez en outre de réduire les passe-partout de par le lancer de la upgradeAllRegistered méthode dans Angulaire du run bloc:

    angular.module('app', [])
    .run(function ($rootScope,$timeout) {
        $rootScope.$on('$viewContentLoaded', ()=> {
          $timeout(() => {
            componentHandler.upgradeAllRegistered();
          })
        })
      });
    • Yep, j'ai changé mon projet pour en tenir compte. Merci.
    • Je suis tout à fait nouveau angulaire et apprécierais vraiment si vous pouviez faire un jsfiddle comme un exemple pour moi. Je suis en cours d'exécution dans la même problèmes avec angulaires & MDL que l'OP
    • Je trouve ce travail, mais il y a un problème.. Dans la version la plus récente de la MDL textfield autofocus est fixe et ce qui ne fonctionne pas quand il y a un $timeout appel à componentHandler.upgradeAllRegistered(). Il fonctionne sans $timeout appel, mais il y a toujours problème une fois que vous passez les états dans l'INTERFACE utilisateur du routeur.
    • En outre, la mise à niveau de tous les MDL composants lors de la ng-inclure chargé de son contenu en vous inscrivant sur '$includeContentLoaded' événement fixe aléatoire problèmes avec la barre de navigation dans mon cas.
    InformationsquelleAutor mpint
  2. 12

    Avertissement: je suis l'auteur de ce projet

    Vous pouvez utiliser Material Design Lite dans votre angulaire apps.

    Je crois que vous êtes à la recherche d'un angulaires wrapper sur le dessus de la Conception de Matériel Lite.

    Il y a ce package en développement et il a déjà des directives de mise en œuvre avec les options configurables (flottant champs de texte) http://jadjoubran.github.io/angular-material-design-lite/

    Si vous voulez une INTERFACE utilisateur complète écrite dans angulaire, vous pouvez utiliser Angulaire Du Matériel

    • Si vous vous apprêtez à poster des liens vers vos propres projets, veuillez mettre un avertissement.
    • vous avez raison! Merci pour le sympathique avis. Je fixe ma réponse
    • Si j'utilise les deux angulat matériel et la conception de Matériel lite, aura-t-il un conflit ?
    • ce n'est pas recommandé. Mais il pourrait bien fonctionner parce que chaque bibliothèque dispose d'un préfixe différent/espace de noms pour leur css (mdl vs md). C'est ce qui explique la différence de scotch.io/bar-talk/angulaires-le matériel-vs-matériau-design-lite
    InformationsquelleAutor Jad Joubran
  3. 10

    J'ai eu ce problème de rendu, de plus en plus d'éléments de conception de manière dynamique à l'aide de javascript MDP (par exemple de menu), il n'était pas rendu correctement. J'ai créé une solution pour exécuter componentHandler.upgradeDom () uniquement lorsqu'un nouvel élément est ajouté:

    var app = angular.module('app');
app.run(function () {
    var mdlUpgradeDom = false;
    setInterval(function() {
      if (mdlUpgradeDom) {
        componentHandler.upgradeDom();
        mdlUpgradeDom = false;
      }
    }, 200);

    var observer = new MutationObserver(function () {
      mdlUpgradeDom = true;
    });
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
    /* support <= IE 10
    angular.element(document).bind('DOMNodeInserted', function(e) {
        mdlUpgradeDom = true;
    });
    */
});

    Problème résolu!

    • Cela fonctionne lors de l'utilisation de Ioniques cadre. Merci!
    • Nice, cela m'a aidé pour l'intégration de la MDL Angulaire 2 🙂
    • Quelle est l'efficacité de cette disposition parce qu'elle est l'observation de l'ensemble du document.corps droit ? Est-il prformance astuce ici avec MutationObserver qui maintient cette méthode performant ?
    • Merci. Cela fournit une intégration facile chemin pour MDL menus avec angularjs rendu des composants. Je suis à l'aide de cette méthode de course juste au-dessus de contrôleur sur des pages seulement (vous pouvez avoir plusieurs angularjs exécuter des blocs)
    InformationsquelleAutor Douglas Bernardes
  4. 8

    Vous pouvez inclure l' .css et .js fichiers, comme indiqué sur la Conception de Matériel Lite site web, puis il suffit de faire ce qui suit lors de l'amorçage de votre application ou lors d'un contrôleur de charge. 

    angular.element(document).ready( 
      function() {
        componentHandler.upgradeAllRegistered();
    });

    ou

    $scope.$on('$viewContentLoaded', () => {
  $timeout(() => {
    componentHandler.upgradeAllRegistered();
  })
});
    • J'ai utilisé la première solution et cela a résolu mon problème. Merci!
    InformationsquelleAutor kelsmj
  5. 4

    Il y a moins de force brute façon de mettre à niveau les éléments: pas de besoin pour les intervalles de vérification ou la mise à niveau de l'ensemble de DOM lorsque quelque chose change. MutationObserver déjà vous dit exactement ce qui a changé.

    window.addEventListener('load', function() {
  var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function( mutation ) {
      if (mutation.addedNodes)
        window.componentHandler.upgradeElements(mutation.addedNodes);
    })
  });
  observer.observe(document.body, {
      childList: true,
      subtree: true
  });
});
    InformationsquelleAutor John Hardy