在 ng-view 之外的指令模板中使用 $rootScope 变量答案

【问题标题】：Utilising $rootScope variables in directive template outside of ng-view在 ng-view 之外的指令模板中使用 $rootScope 变量
【发布时间】：2016-01-11 22:31:01
【问题描述】：

我正在尝试将条件类应用于位于 ng-view 上方的导航栏指令模板。

这是 index.html 上的基本设置：

<body ng-app="myApp">

    <navigation-bar></navigation-bar>

    <div class="main-container" ng-view=""></div>

导航栏模板如下：

<div class="nav-bar bg-primary">

    <div class="nav-bar-right-component">

        <button ng-click="toggleLock()" class="nav-bar-button lock-button">
            <span class="glyphicon glyphicon-lock" ng-class="{'locked' : locked }"></span>
        </button>
    </div>
</div>

该指令利用 $rootScope 触发事件以显示某些按钮，例如锁定按钮。我正在控制器和 $rootScope 之间传达“锁定”变量，并且一切正常。我现在唯一需要做的就是使用“锁定”变量应用一个 ng-class。

有没有什么方法可以在不将导航栏包装在控制器中的情况下做到这一点？

感谢您的宝贵时间。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您可以将控制器用作 $rootScopte 的语法：$root

    <button ng-click="toggleLock()" class="nav-bar-button lock-button">
        <span class="glyphicon glyphicon-lock" ng-class="{'locked' : $root.locked }"></span>
    </button>

【讨论】：

哇，这么简单。谢了哥们！你是传奇
我必须等，但我会的！