在角应用程序中动态应用CSS

Question

在我的角度应用程序中，我动态地在iframe中加载url，当url加载到iframe中时，我想将custom.css应用于加载的url。我试过在iframe中使用ng-init和angular-css-injector函数。它可以工作，但是css没有应用。很可能它在最初阶段就被调用了。一旦url加载到iframe中，是否有任何角特性来应用该功能？

下面是代码HTML:

 <iframe frameborder='0' ng-src="{{trustSrc(selected.imgurl)}}" ng-init="applyCSS()"   frameborder="0" allowfullscreen>
</iframe>

App.js:

var routerApp =angular.module('DiginRt', ['ngMaterial','angular.css.injector'])

routerApp.controller('AppCtrl', ['$scope', '$mdSidenav','$sce', 'muppetService', '$timeout','$log', 'cssInjector',function($scope, $mdSidenav,$sce, muppetService, $timeout, $log,cssInjector) {

        $scope.applyCSS = function() {
        cssInjector.add("style.css");
        console.log("loaded css dynamically");

  } 

这是plunker

Answer 1

您正在尝试的事情是将CSS附加到自己的页面中，并且附加css do父文档将不会应用于由iframe创建的子文档(Iframe在src加载到DOM后创建子文档)。

只是你不能这么做。您可以在iFrame中动态添加样式，除非两者的域相同。(相同域的add请参见this SO Answers )

通过查看您的代码，它看起来不像是要在域中加载不同的域( iframe )。

可能的工作是，您可以在url中传递另一个查询参数&在要根据查询参数将其加载到iframe中的站点上维护css代码。(使用yepnope.js有条件地加载js )。