AngularJS : ng-repeat를 사용하여 CSS 스타일 시트를 동적으로로드하십시오.

각 포함에 대한 별도의 모듈로 스타일 시트를 나눠서 동적으로로드하고 싶지만 약간의 차이가 있습니다. 렌더링시 각 로드해야 시트 : 여기AngularJS : ng-repeat를 사용하여 CSS 스타일 시트를 동적으로로드하십시오.

<link ng-repeat="inlude in includes" rel="stylesheet" href="" class="ng-scope">

내 HTML입니다 :

<!DOCTYPE html> 
<html ng-app="forum" ng-controller="masterCtrl"> 
<head> 
    <title>Forum</title> 
    <link rel="stylesheet" href="/stylesheets/reset.css"> 
    <link rel="stylesheet" href="/stylesheets/style.css"> 
    <link ng-repeat="inlude in includes" rel="stylesheet" href="{{include.stylesheet}}"> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script> 
    <script src="/scripts/app.js"></script> 
    <script src="/scripts/controllers.js"></script> 
    <!--[if lt IE 9]> 
    <script src="/scripts/html5shiv.js"></script> 
    <![endif]--> 
</head> 
<body ng-view> 
</body> 
</html>

그리고 여기 내 기본 컨트롤러 :

function masterCtrl($scope){ 
    $scope.includes = { 
     header: { 
      src: 'views/includes/header.html', 
      stylesheet: 'stylesheets/header.css', 
      searchQuery: '' 
     }, 
     threadList: { 
      src: 'views/includes/threadList.html', 
      stylesheet: 'stylesheets/threadList.css' 
     } 
    }; 
}

다른 모든 것은 잘 작동합니다.보고 주셔서 감사합니다.

출처

2014-01-16 Ashton War

href을 ng-href으로 변경하는 대신 스타일 시트의 소스를 설정하지 않으므로 아래 링크를 수정하십시오.

<link ng-repeat="include in includes" rel="stylesheet" ng-href="include.stylesheet" class="ng-scope">

P. include-inlude in includes이있는 오타가 있었기 때문에 작동하지 않았습니다.

출처

2014-01-16 15:01:46 knrz

href 속성을 ng-href 속성으로 바꿉니다. 그러나 이러한 접근 방식은 페이지 속도에 크게 도움이되지 않습니다.

출처

2014-01-16 14:58:47 Dan

또한이 코너 모듈은 당신이 당신의 구성 요소 (지침) 및 페이지 (경로)에 스타일 시트를 참조 할 수 있습니다 밖으로 AngularCSS

확인할 수 있습니다.

당신이

$routeProvider 
    .when('/my-page', { 
    templateUrl: 'my-page/my-page.html', 
    controller: 'pageCtrl', 
    css: 'my-page/my-page.css' 
    });

을 ngRoute

를 사용하는 경우이 지침

myApp.directive('miyDirective', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'my-directive/my-directive.html', 
    css: 'my-directive/my-directive.css' 
    } 
});

을 사용하고 또한

myApp.controller('pageCtrl', function ($scope, $css) { 

    // Binds stylesheet(s) to scope create/destroy events (recommended over add/remove) 
    $css.bind({ 
    href: 'my-page/my-page.css' 
    }, $scope); 

    // Simply add stylesheet(s) 
    $css.add('my-page/my-page.css'); 

    // Simply remove stylesheet(s) 
    $css.remove(['my-page/my-page.css','my-page/my-page2.css']); 

    // Remove all stylesheets 
    $css.removeAll(); 

});

서비스 ($의 CSS)로 사용할 수있는 경우

출처

2015-01-09 19:26:18

AngularJS : ng-repeat를 사용하여 CSS 스타일 시트를 동적으로로드하십시오.

답변

관련 문제