Question

我正在尝试在我的应用上设置自定义主题，所以我正在做的是让用户选择某些主题，它将全面改变应用主题。我有一个服务，它发送一块json并在每个视图的控制器内监听它。现在这在视图本身中工作正常 - 在这里参考了一些工作代码的片段。

我的工厂控制主题 -

angular.module('demoApp')
.factory('templatingFactory', function () {

var meaningOfLife = 
      {
          'h1': '#ea6060',
          'bg': '#ffffff'
      };

return {
  setTheme: function(theme) {
    meaningOfLife = theme;

  },
  getTheme: function() {
    return meaningOfLife;
  }
};

});

我的一个示例控制器显示和更改主题（并监听更改）

$scope.themeStore = templatingFactory.getTheme();
console.log($scope.themeStore);

//send new themes
$scope.themeOne = function () {
  var newT1 = { 'h1': '#8A6516',
                'bg': '#000000'};
  templatingFactory.setTheme(newT1);

};

$scope.themeTwo = function () {
  var newT2 = { 'h1': '#ffffff',
                'bg': '#ea6060'};
  templatingFactory.setTheme(newT2);


};

$scope.themeThree = function () {
  var newT3 = { 'h1': '#ea6060',
                'bg': '#ffffff'};
  templatingFactory.setTheme(newT3);


};
//listen for new themes
$scope.watchThemes = templatingFactory.getTheme();
$scope.$watch(templatingFactory.getTheme, function (newTheme) { 

    $scope.themeStore = newTheme;

});

然后在模板/视图本身上我做这样的事情 -

<h3 ng-style="{ 'color' : themeStore.h1 }">Title</h3>

所以我的问题是这在视图中工作正常。然而，ng-view标签位于主体内部，外部是主体容器，以及我希望能够与此主题对象挂钩的页眉和页脚菜单。所以我的问题是，有没有办法在ng-view之外使用该范围？我不认为这是可能的，但我不知道我怎么可以访问并在页眉页脚和正文上添加ng-style以使用我正在使用的这种方法更改一些css

因此，对于一个简单的参考，它看起来像这样 -

<body ng-app="myApp">
 <div class="container">

  <div class="header" ng-style="{ 'background-color' : themeStore.bg }">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <i class="fa fa-bars"></i>
    </button>
    <div class="headerLogo"></div>
    <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">

    </ul>
</div>
  </div>

  <div ng-view class="velocity-opposites-transition-slideUpIn" data-velocity-opts="{ duration: 500 }" ng-style="{ 'background-color' : themeStore.bg }"> </div>

  <div class="footer">
    <p></p>
  </div>
</div>

</body>

所以你可以看到 - 我试图挂钩标题来改变背景颜色，这不会像这样工作。我注意到的是，如果我将它放在ng-view div本身上，它就可以正常工作。

我非常感谢任何输入，因为我已经坚持了一段时间。感谢您抽出宝贵时间阅读！

Answer 1

ng-view之外的DOM元素必须拥有自己的控制器，并将templatingFactory作为依赖项注入。

首先我会像这样修改html：

<div class="header" ng-controller="headerController" ng-style="{ 'background-color' : themeStore.bg }">

然后将headerController添加到您的模块中：

angular.module('demoApp').controller('headerController', function($scope, templatingFactory){
  $scope.themeStore = templatingFactory.getTheme();

  $scope.$watch(templatingFactory.getTheme, function (newTheme) { 
      $scope.themeStore = newTheme;
  });

});

更可重用的解决方案是创建一个指令，将该控制器功能添加到它应用的任何DOM元素中，但上面的内容更直接。

Answer 2

我认为在ui-view或ng-view之外使用角度函数和变量的最佳方法是使用全局服务。在这种情况下，你应该在“模板工厂”里面做你的主题逻辑。然后将此服务注入不在您的控制器中，而是在您的模块中。

angular.module('demoApp').run(['$rootScope', 'templatingFactory', function($rootScope, templatingFactory){

   $rootScope.templatingService = templatingFactory;

}]);

因此您的服务将在$ rootScope中提供。现在你可以这样使用它。

<body ng-app="myApp">
 <div class="container">

  <div class="header" ng-style="{ 'background-color' : templatingService.getTheme().bg }"> </div>
</div>
</div>

ps：我也是角色相对较新的，所以我对正确/错误的做法一无所知！

Answer 3

对于指令方法，一个简单的例子可能如下所示：

demoApp.directive('themeHeader', function (templatingFactory) {
    return {
        restrict: 'A',
        link : function (scope, element, attrs) {

            scope.$watch(templatingFactory.getTheme, function () {
                element.css('background-color', newTheme.bg);
            });
        }
    }
});

，html看起来像这样：

<div theme-header>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><i class="fa fa-bars"></i></button>
        <div class="headerLogo"></div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right"></ul>
</div>

角度，访问ng-view包装div之外的范围

3 个答案: