javascript - AngularJS 1st ng-class works 2nd doesn't

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'")^ 我有以下带有 ng-click 的 div，它触发了 showSidebar

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

$scope.showSidebar = true; 在 resultsController 中，当调用 ng-click 时，DIV1 上的 ng-class 需要效果但不对 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 时，会从父级创建一个新的子级范围。但在这种情况下，由于您引用的是对象引用，因此更改将反射(reflect)在子范围和父范围中。

这是一个DEMO .单击文本“内部”以查看更改。