javascript - 当 $rootScope 改变时 AngularJS 更新 View

Question

我正在尝试构建一个 Angular 应用程序，它有一个侧边栏，可以更新 DOM 中的各种元素。

目前我有以下配置:

index.html

<div id="sidebar" ng-controller='SidebarController' ng-class="myclass" class="col-md-2 animated fadeIn" ui-view="sidebar" ng-cloak>
        <i ng-click='toggleSidebar()' class='fa fa-chevron-right'></i>
        <div class='col-md-12 main'>
            <section id='templates'>
                <div class="btn-group">
                    <label class="active btn btn-primary" ng-model="templateModel" ng-click='changeTemplate(templateModel)' uib-btn-radio="'t1'">Template 1</label>
                    <label class="btn btn-primary" ng-model="templateModel" ng-click='changeTemplate(templateModel)' uib-btn-radio="'t2'">Template 2</label>
                    <label class="btn btn-primary" ng-model="templateModel" ng-click='changeTemplate(templateModel)' uib-btn-radio="'t3'">Template 3</label>
                    <label class="btn btn-primary" ng-model="templateModel" ng-click='changeTemplate(templateModel)' uib-btn-radio="'t4'">Template 4</label>
                </div>
            </section>
        </div>
        <div class='col-md-12 other'>
            <uib-accordion close-others="oneAtATime">
                <uib-accordion-group is-open="status.open" heading="Other fun things you can edit" panel-class="">
                    <section id='Option'>
                        <span>Select Option type</span>
                        <div class="btn-group">
                            <label ng-model="optionChoice" ng-click='optionType(optionChoice)' class="btn btn-primary" uib-btn-radio="'optiona'">Option A</label>
                            <label ng-model="optionChoice" ng-click='optionType(optionChoice)' class="active btn btn-primary" uib-btn-radio="'optionb'">Option B</label>
                            <label ng-model="optionChoice" ng-click='optionType(optionChoice)' class="btn btn-primary"  uib-btn-radio="'optionc'">Option C</label>
                        </div>
                    </section>
                </uib-accordion-group>
            </uib-accordion>
        </div>
    </div>
    <!-- MAIN CONTENT -->
    <div id="main-container" class="col-md-10 animated fadeIn" ui-view="mainContent" ng-cloak></div>

以及与之关联的 Controller SidebarController.js:

application.controller('SidebarController', ['$scope', '$rootScope', '$http', '$state', function ($scope, $rootScope, $http, $state, $translate) {
    //Select Option
    $rootScope.optiona= false;
    $rootScope.optionb= true;
    $rootScope.optionc= false;
    $scope.optionType= function (optionChoice) {
        switch (optionChoice) {
        case "optiona":
            $rootScope.optiona= true;
            $rootScope.optionb= false;
            $rootScope.optionc= false;
            break;
        case "optionb":
            $rootScope.optionb= true;
            $rootScope.optiona= false;
            $rootScope.optionc= false;
            break;
        case "optionc":
            $rootScope.optionc= true;
            $rootScope.optionb= false;
            $rootScope.optiona= false;
            break;
        }
    }
}]);

然后我有另一个名为 home.html 的模板:

<div id='mybtn' ng-if="general.optiona" class='alt-btn btn btn-primary' role="button">Option A</div>
<div id='mybtn' ng-if="general.optionb" class='alt-btn btn btn-primary' role="button">Option B</div>

和 Controller MainPageController.js:

    application.controller('MainPageController', ['$scope', '$rootScope', '$http', '$state', '$window', function ($scope, $rootScope, $http, $state, $window, $translate, $location) {

        $scope.general = {
            optiona: $rootScope.optiona,
            optionb: $rootScope.optionb,
            optionc: $rootScope.optionc
        }
 }]);

我希望相关的 div 会根据所选的选项显示，但事实并非如此。有没有办法当 SidebarController.js 更新 $rootScope 时，MainPageController.js 会自动更新？

此外，我知道将内容存储在 $rootScope 中并不是最佳实践，但在本例中我选择这样做。

我在控制台窗口中也没有收到任何错误。该应用程序在我的浏览器中运行良好，但我无法相应地更新界面

非常感谢任何帮助!

Answer 1

不要使用 $rootScope，这不是它的用途。请阅读有关 Angular 服务的信息，并使用它们在应用程序的不同部分之间共享数据。

无论你的问题如何 - 如果你想使用 $watch 函数检测 $rootScope 中的更改，你也应该阅读相关文档。

祝你好运。