Тема Angular JS Material не загружается, пока я не взаимодействую с элементом - PullRequest
Новая
       39

Тема Angular JS Material не загружается, пока я не взаимодействую с элементом

0 голосов
/ 12 октября 2019

Итак, я делаю расширение для хрома, используя материал angularJs.
Если честно, я новичок в угловых Js, но сейчас я понимаю, как использовать некоторые из них.
Одна из причин, по которой я создал это расширение в Angular Js, заключается в переключении тем, палитр и темной темы.
Так что в расширении я даю пользователям возможность использовать светлую или темную тему.
Для этого я использую 2 отдельные темы: LightTheme и DarkTheme
Мой код: 

var app = angular
  .module('MyApp',['ngMaterial'])
    .config(function($mdThemingProvider) {
  $mdThemingProvider.theme('DarkTheme')
    .primaryPalette('red')
   .accentPalette('deep-purple')
      .dark()
  $mdThemingProvider.alwaysWatchTheme(true);


  $mdThemingProvider.theme('LightTheme')
  .primaryPalette('blue')
   .accentPalette('pink')
    $mdThemingProvider.alwaysWatchTheme(true);
})


Таким образом, я сохраняю и получаюэто использует chrome.storage, как показано ниже: 

app.controller('myController', ($scope, $timeout, $mdBottomSheet, $mdToast, $mdDialog) => {



chrome.storage.onChanged.addListener((changes, area) => {
    if ("darkMode" in changes) {
     darkMode();
    }
});

  $scope.SwitchDarkMode = function(type) {

      if (type == 'light') {
        chrome.storage.local.set({'darkMode': false});

      } else if (type == "dark") {
        chrome.storage.local.set({'darkMode': true});
      }
  };


     darkMode();
function darkMode() {
     chrome.storage.local.get([
        'darkMode'
    ], (result) => {

      if (result.darkMode == true) {
$scope.theme = 'DarkTheme';
      } else {
$scope.theme = 'LightTheme';
      }



    });

}

});


<body ng-app="MyApp" md-theme="{{ theme }}" ng-cloak md-theme-watch  ng-controller="myController">
<md-button ng-click="SwitchDarkMode(light)">Light</md-button>
<md-button ng-click="SwitchDarkMode(dark)">Dark</md-button>


</body>


Так что проблема, с которой я столкнулся, заключается в том, что когда я нажимаю на кнопку, чтобы изменить тему, SwitchDarkModeФункция обновит хранилище Chrome. Затем слушатель должен обнаружить это изменение и выполнить функцию darkMode();, чтобы обновить тему страницы.
Проблема, с которой я столкнулся, заключается в том, что, когда слушатель обнаруживает изменение, он переключает функцию darkMode();, но тема страницы не обновляется, пока я не взаимодействую с угловым элементом (например, наведите курсор на кнопку или откройте модальное окно). ...).
Я попытался добавить $scope.theme = 'DarkTheme'; или $scope.theme = 'LightTheme';, как показано ниже, и тема изменилась, но только для этой страницы. 

$scope.SwitchDarkMode = function(type) {

      if (type == 'light') {
        chrome.storage.local.set({'darkMode': false});
        $scope.theme = 'LightTheme';
      } else if (type == "dark") {
        chrome.storage.local.set({'darkMode': true});
        $scope.theme = 'DarkTheme';
      }
  };

Кроме того, причина, по которой я использую прослушиватель, заключается в том, что расширение работает на нескольких страницах, и я хотел бы обновить все темы страницы одновременно. Чего я не понимаю, так это того, почему тема не будет корректно обновляться с использованием слушателя. Может ли кто-нибудь помочь мне понять, в чем проблема, и если есть способ, которым я мог бы это исправить? В любом случае, спасибо заранее за любые предложения. полный код: 

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.css">
</head>
<body>
<body ng-app="MyApp" md-theme="{{ theme }}" ng-cloak md-theme-watch ng-controller="myController">
<md-button ng-click="SwitchDarkMode(light)">Light</md-button>
<md-button ng-click="SwitchDarkMode(dark)">Dark</md-button>


</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.js"></script>
  
<script>
var app = angular
  .module('MyApp',['ngMaterial'])
    .config(function($mdThemingProvider) {
  $mdThemingProvider.theme('DarkTheme')
    .primaryPalette('red')
   .accentPalette('deep-purple')
      .dark()
  $mdThemingProvider.alwaysWatchTheme(true);


  $mdThemingProvider.theme('LightTheme')
  .primaryPalette('blue')
   .accentPalette('pink')
    $mdThemingProvider.alwaysWatchTheme(true);
})
app.controller('myController', ($scope, $timeout, $mdBottomSheet, $mdToast, $mdDialog) => {



chrome.storage.onChanged.addListener((changes, area) => {
    if ("darkMode" in changes) {
     darkMode();
    }
});

  $scope.SwitchDarkMode = function(type) {

      if (type == 'light') {
        chrome.storage.local.set({'darkMode': false});

      } else if (type == "dark") {
        chrome.storage.local.set({'darkMode': true});
      }
  };


     darkMode();
function darkMode() {
     chrome.storage.local.get([
        'darkMode'
    ], (result) => {

      if (result.darkMode == true) {
$scope.theme = 'DarkTheme';
      } else {
$scope.theme = 'LightTheme';
      }



    });

}

});
</script>
</body>
...