web-dev-qa-db-ja.com

Material Design LiteとAngularJSの統合

Angular Material を知っています。これはAngular単一ページのアプリケーションで使用するためのMaterial Design仕様の実装に役立ちます。

しかし、私は見て Material Design Lite 私のAngularプロジェクトと統合する代替。MaterialDesign Liteを統合するための最善の方法を知りたいとAngularJSアプリ。

javascriptangularjsmaterial-design-lite
27
dantheta

Emjayの2番目の答えは私にとってはうまくいきました。 upgradeAllRegisteredメソッドをAngularのrunブロックにトスすることで、ボイラープレートをさらに減らすことができます。

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

免責事項：私はこのプロジェクトの著者です

angularアプリでMaterial Design Liteを使用できます。
angular Material Design Liteの上にあるラッパーを探していると思います。

このパッケージは非常に開発が進んでおり、構成可能なオプション（フローティングテキストフィールド）で実装されたいくつかのディレクティブが既にあります http://jadjoubran.github.io/angular-material-design-lite/

角度で記述された完全なUIが必要な場合は、 Angular Material を使用できます

12
Jad Joubran

この問題をレンダリングしていましたが、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;
    });
    */
});

問題が解決しました！

11
Douglas Bernardes

Material Design Lite Webサイトで指示されているように.cssおよび.jsファイルを含めることができ、アプリをブートストラップするとき、またはコントローラーがロードするときに次のことを行うだけです。

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

または

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

要素をアップグレードする総当たり的な方法はあまりありません。間隔をチェックしたり、何かが変更されたときに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
  });
});
4
John Hardy