ng-show 不隐藏元素，当它是 falsy 时

Question

我正在使用下面的代码 (Angular + Material)。一切正常，但是当ng-show的表达式改为false时，元素仍然可见

当您单击 md-toolbar 中的 md-button 时，控制台将记录更改的值 (false)，但元素 md-content 仍然可见。

你能帮我解决这个问题吗？如果需要更多详细信息，我可以把它放在这里。

更新： 当我将按钮移动到模板 templates/sidebar/template.html 时，它工作正常。

已解决： 我在我的控制器中使用 $rootScope 而不是 $scope 并且一切正常！

HTML:

<body layout="column">
    <md-toolbar layout="row">
        <div class="md-toolbar-tools">
            <md-button ng-controller="sidebar" ng-click="sidebarClose()" class="md-icon-button"><!-- hide-gt-md -->
                <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
            </md-button>
            <h1><img src="img/yt.png" class="img-rounded" /> My project</h1>
        </div>
    </md-toolbar>

    <section layout="row" id="content">
        <md-content ng-controller="sidebar" ng-show="sidebarOpened" layout-padding md-scroll-y ng-include="'templates/sidebar/template.html'" style="width:304px;">        
        </md-content>

        <md-content ng-controller="homepage" flex layout-padding md-scroll-y ng-include="'templates/home/template.html'">
        </md-content>
    </section> 
</body>

边栏控制器

app.controller("sidebar", function($scope, $mdSidenav) {

    $scope.sidebarOpened = true;

    $scope.sidebarOpen = function() {
        $scope.sidebarOpened = true;  
        console.log($scope.sidebarOpened);
    };

    $scope.sidebarClose = function() {
        $scope.sidebarOpened = false;
        console.log($scope.sidebarOpened);
    };

});

Answer 1

带有 ng-show="sidebarOpened" 的元素位于包含按钮的带有 ng-controller="sidebar" 的元素之外。所以他们不使用相同的控制器实例，也不使用相同的范围，因此写入控制器的值不是 ng-show.

读取的值

正文应由主控制器处理，包含标志和 hide/show 侧边栏的方法。该按钮不应位于侧边栏控制器内。

ng-show 不隐藏元素，当它是 falsy 时

ng-show don't hide element, when it's falsy

angularjs

angular-material