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?

Также я знаю, что это не самая лучшая практика для хранения вещей в $rootScope, но для этого экземпляра я решил сделать это.

Я также получаю ошибки в окне консоли. Приложение работает в моем браузере отлично, но я не могу обновить интерфейс соответственно

любая помощь очень ценится!

Answer 1

Не используйте $ rootScope, это не то, для чего предназначено. , пожалуйста, прочитайте об угловых услугах и используйте их вместо этого, чтобы обмениваться данными по различным частям вашего приложения.

в любом случае для вас вопрос - если вы хотите обнаружить изменение в $ rootScope, используйте функцию $ watch, вы также должны прочитать документацию.

Удачи.