角度控制器，多个模板，并将范围值从控制器传递到主页面

我开始一个新项目，并将在“单页结构”应用程序中使用角度。我对角度有点新。角度控制器，多个模板，并将范围值从控制器传递到主页面

所以，我为我的网站购买了一个模板。它有2个不同的布局，我想使用。 1用于我的未认证（营销）页面，另一页用于我的大多数认证页面。

两者的区别很微妙，但内页需要外部页面不能拥有的<body>标签上的类。我考虑过使用2种布局，但当我开始考虑如何布置我的网站时，这很棘手。

我想到的是用角度来管理我的布局，这样我只需要一个母版页是这样的：

<body ng-class="{menu-right-hidden: isInternalPage }"> 

    <div class="container-fluid"> 

     <div ng-if="isInternalPage" id="menu" class="hidden-print hidden-xs sidebar-blue sidebar-brand-primary"> 
     <!-- sidebar content --> 
     </div> 

     <div id="content"> 
     @RenderBody() 
     </div> 

     <div class="clearfix"></div> 

     <div ng-if="isInternalPage" id="footer" class="hidden-print"> 
     <!-- internal footer --> 
     </div> 
     <div ng-if="!isInternalPage" id="footer" class="hidden-print"> 
     <!-- external footer --> 
     </div> 

    </div> 

</body>

我的问题是：有没有一种简单的方法来设置isInternalPage（可能还有其他valies ）没有$scope.isInternalPage = true/false;装饰我所有的控制器？

来源

2014-07-12 Josh

你可以使用NG-init和定义上$ rootScope一个范围变量：

<body ng-init="$root.isInternalPage = true" ng-class="{menu-right-hidden: $root.isInternalPage }"> 

    <div class="container-fluid"> 

     <div ng-if="$root.isInternalPage" id="menu" class="hidden-print hidden-xs sidebar-blue sidebar-brand-primary"> 
     <!-- sidebar content --> 
     </div> 

     <div id="content"> 
     @RenderBody() 
     </div> 

     <div class="clearfix"></div> 

     <div ng-if="$root.isInternalPage" id="footer" class="hidden-print"> 
     <!-- internal footer --> 
     </div> 
     <div ng-if="!$root.isInternalPage" id="footer" class="hidden-print"> 
     <!-- external footer --> 
     </div> 

    </div> 

</body>

或者，你可以在你的$ rootScope变量分配内的控制器之一：

app.controller('ctrl', function($rootScope) { 
    $rootScope.isInternalPage = true; 
});

来源

2014-07-12 03:21:45 pixelbits

我真的很喜欢这个想法，但我想我会扩大这个包裹这变量（如@aarosil所建议的）以防万一我需要母版页上的其他值，并在我的控制器中对其进行标准化。谢谢！ – Josh

什么你可以在这种情况下创建一个AngularJS service：“你可以使用服务来组织和分享你的应用程序中的代码”

angular.module('core').service('GlobalVars', [ 'addDependenciesHere', 
    function(addDependenciesHere) { 
     this.isInternalPage = someVal ? true : false 
    } 
]);

再注入到这个构造每个控制器

angular.module('core').controller('HomeController', ['$scope', 'GlobalVars', 
    function ($scope, GlobalVars) { 
     $scope.globals = GlobalVars; 
    } 
]);

然后在您的视图，您可以访问此直接

<body ng-class="{menu-right-hidden: globals.isInternalPage }">

来源

2014-07-13 18:21:58 aarosil

角度控制器，多个模板，并将范围值从控制器传递到主页面

回答

相关问题