Программно переключить класс на элемент ng-include

Question

У меня есть список элементов, которые генерируются через ng-переключатель внутри ng-include внутри ng-repeat.

Один из этих элементов требует видимости, переключенной на основе текущего значения переменной области.

Нагрузка на страницу, я могу действовать на событие $includeContentLoaded, но есть также навигация в приложении, которая изменила элементы ng-repeat и (я считаю) кэширует текущий шаблон/с. Это означает, что если я вернусь к этой странице (через приложение), событие $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; 
} 

Соответствующий нг-повторить код:

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

Соответствующая часть нг-включают:

<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> 

************ решаемые **********

получил это решается с участием ответов.

Я получил его для работы с небольшими изменениями.

Модифицированный нг-класс немного:

<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