AngularJS更新視圖時$ rootScope改變

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> 

，並用它SidebarController.js相關的controller：

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 
     } 
}]); 

我的希望是，有關股利將根據選擇的選項顯示，但事實並非如此。當SidebarController.js更新$rootScope時有沒有辦法MainPageController.js會自動更新？

我也知道存儲在$rootScope東西它不是最好的做法，但這種情況下我選擇這樣做。

我也recieving在控制檯窗口中沒有錯誤。該應用程序是我的瀏覽器罰款內運行，但我無法更新界面相應

任何幫助，非常感謝！

Answer 1

不要使用$ rootScope，這不是它的意思。 請閱讀有關angular Services的內容，然後使用它們在應用程序的不同部分之間共享數據。

任何方式爲您選擇的問題 - 如果你想以檢測$ rootScope改變使用$腕錶功能，你應該閱讀本細則ANOUT之謂也。

祝你好運。