Tự động tải chủ đề tài liệu theo góc

Question

Tôi đang xây dựng ứng dụng Góc sử dụng Vật liệu góc. Một trong những bước đầu tiên trong ứng dụng là người dùng đăng nhập. Tiếp theo, hệ thống tải từ chương trình phụ trợ do chủ đề của công ty đó tạo ra.

Tuy nhiên, khi chương trình phụ trợ phản hồi với thông tin Chủ đề, tôi không thể đưa nó vào hệ thống. $ MdThemingProvider, cho phép bạn thiết lập các chủ đề, dường như không có sẵn từ bên trong một Controller và bản thân dịch vụ $ mdTheming không có các tùy chọn để sửa đổi các chủ đề trong hệ thống.

Có cách nào để tự động tải chủ đề mới vào ứng dụng Material Angular?

Answer 1

Tôi đã cố gắng khắc phục điều này bằng cách thực hiện một số thay đổi nhỏ đối với nhà cung cấp. Để cho phép thay đổi chủ đề:

Đầu tiên, hãy sửa đổi hàm generateThemes trong angular-material.js để đặt generationIsDone = false.

Điều này sẽ cho phép bạn tạo lại chủ đề sau này.

function generateThemes($injector) { 
    var styles = $injector.has('$MD_THEME_STYLESHEETS') ? $injector.get('$MD_THEME_STYLESHEETS') : []; 
    if (styles) { 
     var $q = $injector.get('$q'); 
     var $http = $injector.get('$http'); 
     var calls = []; 

     angular.forEach(styles, function(style){ 
      calls.push($http.get(style)); 
     }); 

     $q.all(calls).then(function(responses) { 
      var css = ''; 
      angular.forEach(responses, function(response) { 
       css += response.data; 
      }); 
      generationIsDone = false; // here 
      generateCss(css); 
     }); 
    } else { 
     var css = $injector.has('$MD_THEME_CSS') ? $injector.get('$MD_THEME_CSS') : ''; 
     generationIsDone = false; // here 
     generateCss(css); 
    } 
} 

Thứ hai, hãy tạo hàm createThemes() làm tài sản trên ThemingService.

Bạn có thể gọi nó khi bạn đã thêm chủ đề mới, để tạo CSS của chúng.

ThemingService.$inject = ["$rootScope"]; 
    return themingProvider = { 
    definePalette: definePalette, 
    extendPalette: extendPalette, 
    theme: registerTheme, 

    setDefaultTheme: function(theme) { 
     defaultTheme = theme; 
    }, 
    alwaysWatchTheme: function(alwaysWatch) { 
     alwaysWatchTheme = alwaysWatch; 
    }, 
    reload: generateThemes, // here 
    $get: ThemingService, 
    _LIGHT_DEFAULT_HUES: LIGHT_DEFAULT_HUES, 
    _DARK_DEFAULT_HUES: DARK_DEFAULT_HUES, 
    _PALETTES: PALETTES, 
    _THEMES: THEMES, 
    _parseRules: parseRules, 
    _rgba: rgba 
    }; 

Thứ ba, để thực sự tạo ThemingProvider cho bộ điều khiển của bạn, hãy thêm nó vào mô-đun của bạn dưới dạng giá trị.

angular.module ("yourModule", [ 'whateverDependencies']) .config (function ($ cung cấp, $ mdThemingProvider) { $ provide.value ('themeProvider', $ mdThemingProvider); // bây giờ bạn có thể tiêm các nhà cung cấp })

Và cuối cùng, nơi bạn cần đến nó, chỉ cần gọi cho các giá trị trong các bộ điều khiển của bạn:

}).controller('someController', function(themeProvider, $injector) {   

themeProvider.theme('someNewTheme').primaryColor('orange').accentColor('pink'); 
    themeProvider.reload($injector); 
} 

Answer 2

này là dễ dàng hơn bây giờ. Bạn chỉ phải bỏ qua bước đầu tiên. Trong hồ sơ:

1. Thêm reload: generateThemes trong themingProvider function (góc-material.js)

2. Làm cho nhà cung cấp sẵn cho các bộ điều khiển của bạn:

   $ provide.value ('themeProvider', $ mdThemingProvider);

3. Tạo chủ đề của bạn trong điều khiển của bạn sử dụng themeProvider

4. Nạp lại chủ đề sử dụng themeProvider.reload($injector);

Answer 3

Tính đến phiên bản 1.0.5 góc-vật liệu:

1. Thêm

   reload: generateTheme 
   

   trong themingProvider chức năng (dòng góc-material.js 4840 - chức năng generateTheme đã có mặt ở góc-material.js, chúng ta chỉ cần một cách để gọi nó)

2. Trong chức năng cấu hình:

   angular.module('my-module').config(function ($provide, $mdThemingProvider) { 
   $mdThemingProvider.generateThemesOnDemand(true); 
   $provide.value('themeProvider', $mdThemingProvider);}); 
   

3. Trong điều khiển của bạn, tiêm themeProvider và bây giờ bạn có thể làm một cái gì đó như:

   //create new theme 
   themeProvider.theme('custom') 
       .primaryPalette('pink') 
       .accentPalette('orange') 
       .backgroundPalette('yellow'); 
   
   //reload the theme 
   themeProvider.reload('custom'); 
   
   //optional - set the default to this new theme 
   themeProvider.setDefaultTheme('custom'); 
   

Answer 4

Sau đây làm việc cho tôi, tất cả tín dụng cho Guilhermecvm, tuy nhiên tôi sẽ thêm mã từ Github issue trong trường hợp google mang bất cứ ai khác ở đây

angular.module('app') 
.config(['$mdThemingProvider', '$provide', function($mdThemingProvider, $provide) { 
    $mdThemingProvider.generateThemesOnDemand(true); 
    $provide.value('themeProvider', $mdThemingProvider); 
}]) 

.controller('AppController', ['themeProvider', '$mdTheming', function(themeProvider, $mdTheming) { 
    //create new theme 
    themeProvider.theme('default') 
     .primaryPalette('pink') 
     .accentPalette('orange') 
     .backgroundPalette('yellow'); 

    //reload the theme 
    $mdTheming.generateTheme('default'); 

    //optional - set the default to this new theme 
    themeProvider.setDefaultTheme('default'); 
}]); 

để tránh 'cố gắng sử dụng không đăng ký chủ đề' cảnh báo, chủ đề nên được bổ sung vào danh sách mdTheming nội bộ của chủ đề

var theme = themeProvider.theme... 
$mdTheming.THEMES[themeName] = theme; 

Answer 5

<your_module>.config(function ($mdThemingProvider, $provide) { 
    $provide.value('$mdThemingProvider', $mdThemingProvider); 
}); 

Bây giờ bạn có thể tiêm $mdTheming và $mdThemingProvider trong điều khiển của bạn và chèn đoạn code dưới đây trong điều khiển của bạn.

$mdThemingProvider.theme(<theme_name>).primaryPalette(<primary_color>).accentPalette(>accent_color>); 
$mdTheming.generateTheme(<theme_name>); 

Nếu bạn muốn đây là chủ đề mặc định của bạn, sau đó:

$mdThemingProvider.setDefaultTheme(<theme_name>); 

hoặc sử dụng md-theme="<theme_name>" trong HTML.

PS: Làm việc với Vật liệu góc 1.1 trở lên.