Question

我正在使用代码贝娄（Angular + Material）。一切正常，但当ng-show的表达式更改为 false 时，该元素仍然可见。

当您点击md-button中的md-toolbar时，控制台会记录更改后的值（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读取的值。

主体应由主控制器处理，包含标志和隐藏/显示侧边栏的方法。该按钮不应位于侧边栏控制器内。

ng-show不隐藏元素，当它是虚假的时候

1 个答案: