javascript - tutorial - Material Design Lite Integración con AngularJS

material design lite button

Question

Estoy al tanto del material angular que ayuda a implementar la especificación de diseño de materiales para su uso en aplicaciones de página única angular.

Sin embargo, estoy analizando la alternativa de Material Design Lite para integrarla con mi proyecto Angular. Me gustaría saber cuál es la mejor manera de integrar Material Design Lite con la aplicación AngularJS.

Answer 1

Estaba teniendo este problema de renderizado, más elementos de diseño dinámicamente utilizando javascript CDM (por ejemplo, menú) no se procesó correctamente. Creé una solución para ejecutar componentHandler.upgradeDom () solo cuando se agrega un nuevo elemento:

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;
    });
    */
});

¡Problema resuelto!

Answer 2

Hay una forma de fuerza bruta menos para actualizar los elementos: no es necesario verificar los intervalos o actualizar todo el DOM cuando algo cambia. MutationObserver ya te dice exactamente qué ha cambiado.

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
  });
});

Answer 3

Puede incluir los archivos .css y .js como se indica en el sitio web de Material Design Lite, luego haga lo siguiente cuando arranque su aplicación o cuando se cargue un controlador.

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

o

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

Answer 4

Descargo de responsabilidad: Soy el autor de este proyecto.

Puedes usar Material Design Lite en tus aplicaciones angulares.
Creo que estás buscando una envoltura angular sobre Material Design Lite.

Hay un paquete en desarrollo y ya tiene implementadas algunas directivas con opciones configurables (campos de texto flotante) http://jadjoubran.github.io/angular-material-design-lite/

Si desea una interfaz de usuario completa escrita en angular, puede utilizar material angular

Answer 5

La segunda respuesta de Emjay funcionó para mí. Además, puede reducir la upgradeAllRegistered al lanzar el método upgradeAllRegistered en el bloque de run de Angular:

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