2016-05-05 8 views
1

Ich bin daran interessiert, ein auf Angular Material basierendes Kontaktformular auf einer von Shopify gehosteten Seite zu verwenden. Da der Rest der Site (noch) nicht mit Angular Material erstellt wurde, möchte ich dieses Kontaktformular modular implementieren und innerhalb seiner eigenen div. Datei isolieren. Das Problem, auf das ich gestoßen bin, ist, dass das Stylesheet (derzeit im Kopf verknüpft) für Angular Material Seitenelemente außerhalb des gewünschten Einflussbereichs beeinflusst. Ist es möglich, den Inhalt von Angular Material vom Rest der Seite zu isolieren? Wie könnte man darüber gehen?Verwenden Sie Angular Material nur in einem Teil einer Seite

Antwort

1

Die einzige Möglichkeit, wie Sie dies tun können, ist die Verwendung eines iframe, weil die CSS immer kombinieren wird, und folgt der Regel der Kaskade, so dass die untere die anderen überschreibt.

+0

Ich kann sehen, wie dies von Vorteil sein könnte. Wenn ich einen iframe von Inhalten von einem Server oder einer App verwende, könnte ich noch mehr Kontrolle über die Formularübermittlung haben. –

5

Sie können separate Angular-Modul für Ihre benötigte Template-Datei erstellen und dort eckiges Material einspritzen. Verknüpfen Sie Angular-Material-CSS nur in dieser Vorlagendatei. Auf diese Weise werden andere Seiten nicht beeinflusst.

+0

Das klingt nach einem guten Weg, können Sie mich auf Dokumente oder Tutorials zu dieser Methode verweisen? Oder ist das das Gleiche, was in oguzhan000s Antwort vorgeschlagen wurde? –

+0

Ja @ Oguzhan's Antwort sieht für mich ok aus. Du kannst dem folgen. –

1

Sie können Winkel-UI-Router-Zustände mit separaten Winkelmodulen verwenden. So können Sie Winkelmaterial aus dem Zustand Ihrer Routen injizieren und dann verwenden.

 module.exports = 
     angular.module('parentModule', [ 
     'angularMoment', 
     require("./childFolder"), 

     ]) 
    .config(function ($stateProvider) { 
    $stateProvider 
    .state('parent', { 
     url:"parent/", 
     views:{ 
     '': { 
      templateUrl: 'main/layout.html', 
      controller: 'MainController' 
     } 
     } 
    }) 
.controller('MainController', require('./mainController')); 

module.exports = 
     angular.module('childModule', [ 
     'ngMateiral', 'ngMessages' 
     ]) 
.config(function ($stateProvider) { 
     $stateProvider 
     .state('parent.child', { 
      url: "parent/:id", 
      views: { 
      '': { 
       templateUrl: 'main/layout.html', 
       controller: 'MainController' 
      }, 
      '[email protected]': { 
       templateUrl: 'main/child/layout.html' 
       controller: 'ChildController' 
      } 
      } 
     }); 
    }) 
    .controller('ChildController', require('./childController'));