재료 설계 라이트(Right)JS

재료 설계 라이트(Right)JS

닫았습니다. 이 질문은의견 기반의현재 답변을 받고 있지 않습니다.

---

이 질문을 개선하시겠습니까?이 게시물을 편집하여 사실과 인용문으로 답변할 수 있도록 질문을 업데이트하십시오.

2년 전에 문을 닫았어요

이 질문을 개선하다

Angular 한 페이지 응용 프로그램에서 사용할 재료 설계 사양을 구현하는 데 도움이 되는 Angular Material을 알고 있습니다.

하지만 저는 Angular 프로젝트와 통합하기 위해 Material Design Lite의 대안을 검토하고 있습니다.Material Design Lite와 Angular를 통합하는 가장 좋은 방법을 알고 싶습니다.JS 앱

엠제이의 두 번째 대답은 내게 효과가 있었다.보일러 플레이트를 추가로 줄일 수 있습니다.upgradeAllRegisteredAngular's에 대한 방법run블록:

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

면책사항:나는 이 프로젝트의 저자이다.

사용할 수 있습니다.Material Design Lite각진 앱에 있습니다.
Material Design Lite 위에 각진 포장지를 찾고 계신 것 같습니다.

이 패키지는 많은 개발 중에 있으며 구성 가능한 옵션(텍스트 필드 포함)을 사용하여 이미 구현된 몇 가지 지침이 있습니다.http://jadjoubran.github.io/angular-material-design-lite/

전체 UI를 각도로 작성하려면 Angular Material을 사용할 수 있습니다.

javascript CDM(메뉴 등)을 사용하여 동적으로 더 많은 디자인 요소를 렌더링하는 데 문제가 있었습니다.새로운 요소가 추가된 경우에만 componentHandler.upgradeDom()을 실행하는 솔루션을 만들었습니다.

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

문제 해결!

Material Design Lite 웹사이트에 나와 있는 것처럼 .css 및 .js 파일을 포함하면 앱을 부트스트랩하거나 컨트롤러가 로드될 때 다음 작업을 수행할 수 있습니다.

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

또는

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

요소를 업그레이드할 때 간격을 확인하거나 DOM 전체를 업그레이드할 필요가 없습니다.MutationObserver는 이미 무엇이 변경되었는지 정확하게 알려줍니다.

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

언급URL : https://stackoverflow.com/questions/31278781/material-design-lite-integration-with-angularjs