Question

我正在开始一个新项目，我将在“单页架构”应用程序中使用angular。我对角度有点新意。

所以，我为我的网站购买了一个模板。它有2种不同的布局，我想使用它。 1表示我未经身份验证的（营销）页面，另一个表示我的大多数经过身份验证的页面。

每个内容的差异都是微妙的，但内页需要外部页面不能拥有的<body>标签上的类。我考虑过使用2种布局但是当我开始考虑如何布置我的网址时，这很棘手。

我的想法是使用angular来管理我的布局，这样我只需要一个这样的母版页：

<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装饰我的所有控制器的情况下，是否有一种简单的方法来设置$scope.isInternalPage = true/false;（以及可能的其他值）？

Answer 1

您可以使用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;
});

Answer 2

在这种情况下，您可以创建一个AngularJS service：＆＃34;您可以使用服务在整个应用中组织和共享代码＆＃34;

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

角度控制器，多个模板以及从控制器到母版页面的范围值

2 个答案: