ng-if不隐藏第二个元素

Question

每两个视图和一个服务我有两个控制器。服务对象存储第一个视图中的选定值。基于此选定值ng-if必须在第二个视图上呈现一个元素。这是我应该执行此任务的代码。

第一个视图的控制器：

gasStation.controller('registrationController', ['$scope', '$log', '$http', '$window', 'customerType', function ($scope, $log, $http, $window, customerType) {
    customerType.setCustomerType($scope.customerType);
    url += '/pages/index.html#' + '/dashboard';
    $window.location.href = url;
    $scope.customerType = customerType.getCustomerType();
    console.log(customerType.getCustomerType() + ' customer type from controller');};}]);

第一个观点：

    <div class="site-content">
        <h1 class="fueling-header">Registration</h1>

        <form name="regForm" class="pure-form pure-form-aligned">
            <fieldset>

                <!--<%--Type of customers--%>-->
                <div class="pure-control-group">
                    <label for="customerTypes">Your group</label>
                    <select id="customerTypes" ng-model='customerType'>
                        <option value="REGULAR">Regular</option>
                        <option value="BUSINESS">Business</option>
                    </select>
                    <label id="groupError" class="error"/>
                    {{customerType}}
                </div>
            </fieldset>
        </form>
    <!--END: register page-->

第二个控制器

gasStation.controller('dashboardController', ['$scope', '$log', 'customerType', 
function ($scope, $log, customerType) {
    $scope.customerType = customerType.getCustomerType();
    $scope.isBusiness = (customerType.getCustomerType() === 'BUSINESS');
    $scope.isRegular = (customerType.getCustomerType() === 'REGULAR');
    console.log($scope + ' dashboard controller');}]);

第二种观点：

<div id="menu">
     <div class="pure-menu menu-width-restricted">
        <span class="pure-menu-heading">
            <a href="/">GSS <img src="/resources/img/gss-icon.png" width="24" height="24"/></a>
        </span>

        <ul class="pure-menu-list">                                  

        <li class="fixed-height">
        <br/>

        <div class="pure-menu-link">
            Hello, {{customerType}}
        </div>

        <div ng-if="isRegular">

            <li class="fixed-height">
                <a href="#/business_dashboard" class="pure-menu-link">{{customerType == 'REGULAR'}}</a>
            </li>
            <li class="fixed-height">
                <a href="#/business_dashboard" class="pure-menu-link">Revenue</a>
            </li>

            <li class="fixed-height">
                <a href="#/view_gasstations" class="pure-menu-link">Stations</a>
            </li>

        </div>

        <div ng-if="isBusiness">

            <li class="fixed-height">
                <a href="#/search_gasstations" class="pure-menu-link">Search</a>
            </li>

            <li class="fixed-height">
                <a href="#/view_fuelings" class="pure-menu-link">Fuelings</a>
            </li>

            <li class="fixed-height">
                <a href="#/view_vehicles" class="pure-menu-link">Vehicles</a>
            </li>

        </div>

        <br/>
        </li>

        <li class="fixed-height">
        <hr/>
        </li>
        <br/>
        <li class="fixed-height">
        <a href="#/logout" class="pure-menu-link">Log Out</a>
        </li>
        </ul>
    </div>
</div>

当我从第一个视图的下拉列表中选择REGULAR类型客户时，将显示第二个视图<div ng-if="isRegular"></div>，并且未显示<div ng-if="isBusiness"></div>。

问题是当我从第一个视图中选择商务类型客户时，同时显示<div ng-if="isBusiness"></div>和<div ng-if="isRegular"></div>。但我想只显示<div ng-if="isBusiness"></div>

问题是什么，我该如何解决？

选择常规客户时堆栈跟踪的屏幕截图：

当我选择业务类型客户时：

Answer 1

编辑选择时，$ scope.customerType已更改，不一定是您的customerType.getCustomerType（）方法。 我不确定你为什么不工作，因为我不知道getCustomerType（）究竟是什么。

    $scope.customerType = customerType.getCustomerType();
    $scope.isBusiness = (customerType.getCustomerType() === 'BUSINESS');
    $scope.isRegular = (customerType.getCustomerType() === 'REGULAR');

您是否检查过控制台中的错误？它可能不会评估ng-if，只是显示是否发生了某些错误。

Answer 2

我希望我能解释为什么这样的布局会根据仪表板控制器的布尔值正确呈现。

<div id="menu">
 <div class="pure-menu menu-width-restricted">

    <div ng-if="isRegular()">
        <span class="pure-menu-heading">
            <a href="/">GSS <img src="/resources/img/gss-icon.png" width="24" height="24"/></a>
        </span>

        <ul class="pure-menu-list">                                  

            <li class="fixed-height">
            <br/>

            <div class="pure-menu-link">
                Hello, {{customerType}}
            </div>

            <li class="fixed-height">
                <a href="#/search_gasstations" class="pure-menu-link">Search</a>
            </li>

            <li class="fixed-height">
                <a href="#/view_fuelings" class="pure-menu-link">Fuelings</a>
            </li>

            <li class="fixed-height">
                <a href="#/view_vehicles" class="pure-menu-link">Vehicles</a>
            </li>

            <br/>

            <li class="fixed-height">
            <hr/>
            </li>

            <br/>

            <li class="fixed-height">
            <a href="#/logout" class="pure-menu-link">Log Out</a>
            </li>

        </ul>

    </div>

    <div ng-if="isBusiness()">
        <span class="pure-menu-heading">
            <a href="/">GSS <img src="/resources/img/gss-icon.png" width="24" height="24"/></a>
        </span>

        <ul class="pure-menu-list">                                  

            <li class="fixed-height">
            <br/>

            <div class="pure-menu-link">
                Hello, {{customerType}}
            </div>

            <li class="fixed-height">
                <a href="#/business_dashboard" class="pure-menu-link">Revenue</a>
            </li>

            <li class="fixed-height">
                <a href="#/view_gasstations" class="pure-menu-link">Stations</a>
            </li>

            <br/>

            <li class="fixed-height">
            <hr/>
            </li>

            <br/>

            <li class="fixed-height">
            <a href="#/logout" class="pure-menu-link">Log Out</a>
            </li>

        </ul>

    </div>

</div>