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>