css - 以编程方式在 ng-include 元素上切换类

Question

我有一个元素列表，这些元素是通过 ng-repeat 中的 ng-include 中的 ng-switch 生成的。

其中一个元素需要根据范围变量的当前值切换可见性。

在页面加载时，我能够对 $includeContentLoaded 事件采取行动，但也有应用内导航改变了 ng-repeat 元素并且(我相信)缓存了当前模板/秒。这意味着如果我导航回该页面(通过应用内)，$includeContentLoaded 事件不会触发。

不幸的是，因为我需要操作的元素在 ng-include 中，所以没有简单的方法来确保它已准备好进行操作。

我对这个棘手问题的最后一次尝试是以编程方式在 ng-include 上切换一个类，然后添加一个仅针对该元素的样式规则。我希望切换的类将与模板一起缓存，以便在导航回...时它会持续存在......但事实并非如此。所以我很茫然。

有什么意见吗？

这是我的 Controller :

app.controller('Step3Controller', function ($rootScope, $scope, jsonService) {
    $scope.loadStepDefinition(3);

    var militaryService;

    $scope.toggleVaLoanUse = function() {
        militaryService = jsonService.getParams($scope, 'MilitaryService');
        if(militaryService == 0) {
            $scope.hideVaLoanUse();
        } else {
            $scope.showVaLoanUse();
        }
    };

    $scope.hideVaLoanUse = function() {
        $('#lf_PriorVaLoanUse_container').addClass('noexperience');
    };

    $scope.showVaLoanUse = function() {
        $('#lf_PriorVaLoanUse_container').removeClass('noexperience');
    };

    $scope.fieldChanged = function(fieldObject) {
        if (!$scope.fieldValidation(fieldObject)) {
            return;
        }

        if (fieldObject.name == 'MilitaryService') {
            $scope.toggleVaLoanUse();
        }
    };

    $rootScope.$on('$includeContentLoaded', function() {
        $scope.toggleVaLoanUse();
    });

});

我的风格规则:

#lf_PriorVaLoanUse_container.noexperience {
display: none;
}

相关的ng-repeat代码:

<div ng-repeat="field in steps[stepIndex].fields" ng-element-ready="fieldsLoaded()">
    <div ng-include="properties.PAGE_INPUT_ENTRIES"></div>
</div>

ng-include 的相关部分:

<div id="lf_{{::field.name}}_container" class="lf-field-container">
    <div class="lf-step-field-label">
        <label id="lf_{{::field.name}}_label" class="lf-step-field-label-text" ng-cloak>{{::field.label}}</label>
        <label id="lf_{{::field.name}}_label_calc" class="lf-step-field-label-text"
               ng-cloak>{{::field.labelCalc}}</label>
    </div>

    <div ng-show="field.fields == undefined">
        <div ng-if="field.display == 'box'">
            <div id="lf_{{::field.name}}"
                 class="lf-step-field-boxes"
                 ng-focus="displayAssistant(field);">
                <div ng-repeat="fieldOption in field.options"
                     class="lf-step-field-box-container lf-step-field-box-{{::field.columns}}"
                     ng-show="fieldOption.hidden!=true">
                    <div value="{{::fieldOption.value}}"
                         ng-class="fieldOption.value==field.value ? 'lf-step-field-box-selected' : 'lf-step-field-box'"
                         ng-click="iconSelected($event); onChangeBox(field); fieldChanged(field);"
                         ng-keypress="iconSelectedEnter($event); onChangeBox(field); fieldChanged(field);"
                         id="lf_{{::field.name}}__{{::fieldOption.value}}"
                         ng-focus="displayAssistant(field);"
                         tabIndex="0">
                        <div class="lf-step-field-box-label">{{::fieldOption.label}}</div>
                    </div>
                </div>
            </div>
        </div>

************ 已解决 **********

通过响应输入解决了这个问题。

我稍加修改就可以使用了。

稍微修改一下 ng-class:

<div ng-class="{noexperience: toggleVaLoan()}" class="lf-field-container" id="..">

然后将其放入 Controller 中:

$scope.toggleVaLoan = function() {
        militaryService = jsonService.getParams($scope, 'MilitaryService');
        if(militaryService == 0) {
            return true;
        } else {
            return false;
        }
    };

Answer 1

考虑使用 ng-class 指令而不是使用 jQuery 添加和删除所需的类。

HTML

<div ng-class="anyExperience" class="lf-field-container" id="..">

JS

$scope.hideVaLoanUse = function() {
    $scope.anyExperience = "noexperience";
};

$scope.showVaLoanUse = function() {
    $scope.anyExperience = "";
};

欲了解更多信息，请访问 AngularJS ngClass API Docs