AngularJS的第一个ng类作品，第二个不

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

本文关键字：第二个 第一个 ng AngularJS      更新时间：2023-09-26

我有以下内容:

<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; ">

美元范围。在resultsController中，当ng-click被调用时，DIV1上的ng类生效，但DIV2上不起作用。

任何想法?

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

1。不是想要的方式

使用$parent访问父作用域。

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

只需要访问基本类型的parent，而不需要访问对象。所以:

2。正确方式

适当的方法是在模型对象的作用域内设置标志showSidebar，如

$scope.someModel = { showSidebar: true }

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

这是一个DEMO。点击文本"Inside"查看更改

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

编辑

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

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

这样你就可以给你的侧边栏属性和方法，你可以在你的视图中访问。

相关文章：