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>

和控制器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会根据所选的选项显示，但事实并非如此。在MainPageController.js更新SidebarController.js时，$rootScope是否会自动更新？{/ p>

此外，我知道在$rootScope中存储内容并非最佳做法，但对于此实例，我选择这样做。

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

任何帮助非常感谢！

Answer 1

不要使用$ rootScope，这不是它的意思。请阅读有关角度服务的信息，并使用它们来分享您应用程序不同部分的数据。

你问的任何方式 - 如果你想在$ rootScope中检测到一个变化，请使用$ watch函数，你也应该阅读文档。

祝你好运。

$ rootScope更改时，AngularJS更新视图

1 个答案: