角度，访问范围以外的ng视图环绕div

我想在我的应用程序设置自定义主题，所以我正在做的是让用户选择某些主题，它将全面更改应用程序主题。我有一个服务，发送一块JSON，并监听它在每个视图的控制器内部变化。现在，它在视图本身内可以正常工作 - 供参考，这里是工作代码的一些片段。角度，访问范围以外的ng视图环绕div

我厂控制的主题 -

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>

所以我的问题是，这工作正常内六EW。但是，ng-view标签位于主体内部，外部是主体容器，以及我希望能够使用此主题对象挂钩的页眉和页脚菜单。所以我的问题是，有没有办法在ng-view之外使用该范围？我不认为这是可能的，但我不知道我还可以如何访问，并在页眉页脚和正文上放置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上，它就可以正常工作。

我非常感谢任何输入，因为我一直坚持这一段时间。感谢您花时间阅读！

来源

2014-12-01 ajmajmajma

我是新来的角，所以我可能是但我认为这个问题可能会帮助你：http://stackoverflow.com/questions/12008908/how-can-i-pass-variables-between-controllers – coopersita 2014-12-01 18:22:45

@coopersita非常感谢你的回应！我遇到的问题实际上并没有在控制器之间传递，我可以保存在工厂中，并且它在所有控制器中工作得非常好，它在视图外部访问以标记到标题上并且这样（不在视图内） – ajmajmajma 2014-12-01 18:26:08

可能需要在观看templatingFactory服务的头部上有第二条指令，并根据getTheme（）返回的内容更新它的视图。 – Jase 2014-12-01 19:00:08

您的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元素应用于哪个DOM元素，但上面的内容更直截了当。

来源

2014-12-01 19:47:21 SteamDev

我认为在ui-view或ng-view之外使用角度函数和变量的最佳方式是使用全局服务。在这种情况下，你应该在'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：我在角度上也相对比较新，所以对于好的/错误的做法我一无所知！

来源

2014-12-01 20:56:52

对于指令的方式，一个简单的例子可能是这个样子：

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>

来源

2014-12-02 20:17:28 Jase

角度，访问范围以外的ng视图环绕div

回答

相关问题