web-dev-qa-db-fra.com

Intégration Material Design Lite avec AngularJS

Je connais Angular Material qui aide à implémenter la spécification Material Design à utiliser dans Angular applications d'une seule page.

Je regarde cependant Material Design Lite alternative pour intégrer avec mon Angular project. Je voudrais savoir la meilleure façon de procéder pour intégrer Material Design Lite avec et l'application AngularJS.

javascriptangularjsmaterial-design-lite
27
dantheta

La deuxième réponse d'Emjay a fonctionné pour moi. Vous pouvez également réduire le passe-partout en lançant la méthode upgradeAllRegistered dans le bloc run d'Angular:

angular.module('app', [])
    .run(function ($rootScope,$timeout) {
        $rootScope.$on('$viewContentLoaded', ()=> {
          $timeout(() => {
            componentHandler.upgradeAllRegistered();
          })
        })
      });
31
mpint

Avertissement: je suis l'auteur de ce projet

Vous pouvez utiliser Material Design Lite dans vos applications angular.
Je crois que vous cherchez un wrapper angular au-dessus de Material Design Lite.

Il y a ce paquet en cours de développement et il a déjà quelques directives implémentées avec des options configurables (champs de texte flottants) http://jadjoubran.github.io/angular-material-design-lite/

Si vous voulez une interface utilisateur complète écrite en angulaire, vous pouvez utiliser Angular Material

12
Jad Joubran

J'avais ce problème de rendu, plus d'éléments de conception en utilisant dynamiquement le CDM javascript (par exemple le menu), il n'a pas été 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!

11
Douglas Bernardes

Vous pouvez inclure les fichiers .css et .js comme indiqué sur le site Web Material Design Lite, puis procédez comme suit lors du démarrage de votre application ou lors du chargement d'un contrôleur.

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

ou

$scope.$on('$viewContentLoaded', () => {
  $timeout(() => {
    componentHandler.upgradeAllRegistered();
  })
});
8
kelsmj

Il existe un moyen moins brutal de mettre à niveau les éléments: pas besoin de vérifier les intervalles ou de mettre à niveau l'ensemble du DOM lorsque quelque chose change. MutationObserver vous indique déjà 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
  });
});
4
John Hardy