Question

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

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

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

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

我对这个棘手问题的最后一次尝试是以编程方式在ng-include上切换一个类，然后添加一个仅针对该元素的样式规则。我希望切换的课程会与模板一起缓存，以便在导航回来时仍然存在......但它并没有。所以我不知所措。

任何输入？

这是我的控制人员：

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="..">

然后把它扔进控制器：

$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

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

1 个答案: