1

我有以下内容:

<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 上不生效。

有任何想法吗?

4

2 回答 2

1

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

编辑

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

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

这样,您可以提供可以在视图中访问的侧边栏属性和方法。

于 2014-03-18T14:24:46.357 回答
1

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

1.不是理想的方式

用于$parent访问父范围。

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

我们只需要访问原始类型的父对象,而不需要访问对象。所以:

2.适当的方式

适当的方法是将标志showSidebar放在范围内的模型对象中。

$scope.someModel = { showSidebar: true }

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

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

于 2014-03-18T14:43:47.877 回答