Fatal编程技术网
  • javascript/
  • Javascript 角度，访问ng视图包装div之外的范围

Javascript 角度，访问ng视图包装div之外的范围

javascript html css angularjs

Javascript 角度，访问ng视图包装div之外的范围,javascript,html,css,angularjs,Javascript,Html,Css,Angularjs,我正在尝试在我的应用程序上设置自定义主题，因此我所做的是让用户选择某些主题，这将全面更改应用程序主题。我有一个服务，它发送一段json，并监听它在每个视图的控制器中的变化。现在，这在视图本身中可以很好地工作——这里有一些工作代码片段供参考 我的工厂控制着这个主题- angular.module('demoApp') .factory('templatingFactory', function () { var meaningOfLife = { 'h1': '

我正在尝试在我的应用程序上设置自定义主题，因此我所做的是让用户选择某些主题，这将全面更改应用程序主题。我有一个服务，它发送一段json，并监听它在每个视图的控制器中的变化。现在，这在视图本身中可以很好地工作——这里有一些工作代码片段供参考

我的工厂控制着这个主题-

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

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

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

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

});
我的一个示例控制器显示和更改主题（并侦听更改）

然后在模板/视图本身上，我做了如下操作-

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

标题
因此，我的问题是，这在视图中运行良好。但是，ng视图标记位于主体内部，外部是主体容器，以及我希望能够与此主题对象挂钩的页眉和页脚菜单。所以我的问题是，有没有办法在ng视图之外使用这个范围？我不认为这是可能的，但我不确定我如何访问并在页眉、页脚和正文上放置ng样式，以使用我正在使用的方法更改某些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上，它就可以正常工作了

我将非常感谢任何意见，因为我已经在这方面停留了一段时间。感谢您抽出时间阅读

您的
ng视图之外的DOM元素必须有自己的控制器，并且
templatingFactory
作为依赖项注入

首先，我将修改html，如下所示：


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



一个更可重用的解决方案是创建一个指令，将此控制器功能添加到它应用到的任何DOM元素中，但上面的内容更直接。
我认为将角度函数和变量置于ui视图或ng视图之外的最佳方法是使用全局服务。在这种情况下，您应该在“templatingFactory”中执行主题化逻辑。然后将此服务注入模块，而不是控制器


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：我在角度方面也是比较新的，所以我对好的/错误的做法一无所知
 对于指令方法，一个简单的示例可能如下所示：


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

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



<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>


html将如下所示：


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

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



<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>





    

    我对angular还不熟悉，所以可能有点离题，但我想这个问题可能会对你有所帮助：@coopersta非常感谢你的回答！我遇到的问题实际上不是在控制器之间传递，我可以使用工厂保存，它在所有控制器中都能很好地工作，它在视图外部访问以标记到标题上，等等（不在视图内部）您可能需要在标头上添加第二个指令，用于监视templatingFactory服务并根据getTheme（）返回的内容更新其视图。@Jase非常有趣！我从来没有做过这样的事情，你能举个例子说明这样的事情是如何运作的吗？谢谢在body标签的顶层有一个outter控制器怎么样。让那个控制者负责这个主题。然后，内部控制器可以引用$rootScope.XXX以获取上层控制器中的值。