AngularJS 1-й нг-класс работает 2-й не

Question

У меня есть следующее:

<div data-ng-controller="resultsController">
    <div id="DIV1" ng-include src="'views/sidebar.html'" ng-class="showSidebar ? 'open' : 'closed' "></div>
    <div id="DIV2" ng-class="showSidebar ? 'open' : 'closed' "></div>

А внутри ( ng-include src="'views/sidebar.html'")^ у меня есть следующий div с ng-click, который вызывает изменение showSidebar

    <div class="panel-header top-sidebar" ng-click="showSidebar = !showSidebar; ">

$ scope.showSidebar = true; находится в resultsController, и когда ng-click вызывается, ng-класс на DIV1 вступает в силу, но не на DIV2.

Есть идеи?

Answer 1

Есть два способа решить эту проблему:

1.Не желаемый путь

С помощью $parent чтобы получить доступ к родительской области.

<div class="panel-header top-sidebar" 
     ng-click="$parent.showSidebar = !$parent.showSidebar; ">

Нам нужен только родительский доступ для примитивного типа, но не для объекта. Так:

2.Соответствующий способ

Надлежащий способ - иметь флаг showSidebar Внутри модельного объекта по объему lik.

$scope.someModel = { showSidebar: true }

а затем сослаться на него внутри включенной страницы, потому что когда вы используете ng-inlcude, новая родительская область создается из родительской. Но в этом случае, поскольку вы ссылаетесь на ссылку на объект, изменения будут отражены как в дочерней, так и в родительской области.

Вот ДЕМО. Нажмите на текст "Внутри", чтобы увидеть изменения.

Answer 2

ng-include создает свой $scope поэтому ваш showSidebar не распространяется на DIV2, потому что он находится за пределами его области видимости. Мой совет: сделайте сервис для своей боковой панели. и включите его в правильный контроллер (ы).

РЕДАКТИРОВАТЬ

Вы создаете сервис под названием sidebar и введите его в свой контроллер как таковой

app.controller('mainCtrl', ['$scope', 'sidebar', function($scope, sidebar){
    //track sidebar
    $scope.sidebar=sidebar;   
}]);

Таким образом, вы можете указать свойства и методы боковой панели, к которым у вас есть доступ в ваших представлениях.