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 时，DIV1上的ng-class需要效果，但不在DIV2上。

有什么想法吗？

Answer 1

ng-include创建了自己的$scope，因此您的showSidebar不会传播到DIV2，因为它超出了它的范围。我的建议是：为你的侧边栏做一个服务。并将其包含在正确的控制器中。

修改

您创建了一个名为sidebar的服务，并将其注入您的控制器

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

通过这种方式，您可以提供可在视图中访问的侧边栏属性和方法。

Answer 2

有两种方法可以解决这个问题：

1. 不是理想的方式

使用$parent访问父作用域。

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

我们只需要访问父类型的父类，但不需要访问对象。所以：

2. 适当的方式

适当的方法是在范围内的模型对象中包含标记showSidebar。

$scope.someModel = { showSidebar: true }

然后在包含的页面中引用它，因为当您使用父项时，将创建一个新的子范围。但在这种情况下，由于您指的是对象引用，因此更改将反映在子对象和父作用域中。

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

AngularJS 1st ng-class作品第二名没有

2 个答案: