AngularJS добавление класса css в родительский div

Question

Я пытаюсь добавить класс к родительскому элементу с помощью angularjs. Я новичок в угловых и немного нормально с jquery. Есть ли какой-либо конкретный способ добавить границу к родительскому потоку родительского элемента, когда есть ng-изменение для элемента управления текстовым полем. Этот сценарий пришел ко мне, поскольку я пытаюсь использовать сборщик дат кендо внутри ng-repeat и должен добавить красную границу для управления, если есть какая-либо ошибка проверки. Telerik kendo datepicker добавляет span в качестве родителя в текстовое поле. поэтому добавление красного цвета в текстовое поле не имеет никакого смысла, и оно должно быть красным для динамически добавленного родительского диапазона для кендо datepicker. Я пытаюсь сделать это общее для того, чтобы то же самое можно было использовать из моего приложения.

Вот my fiddle

<div ng-controller="MyCtrl"> 
    <span class="k-widget k-datepicker k-header" ng-class={{classValidationControl}} style="border: solid"> 
     <span class="k-picker-wrap k-state-default"> 
     <input type="text" kendo-date-picker="" id="endDateTextbox-0" ng-change="addBorderToControl('endDateTextbox-0')"> 
     <span> 
     <span unselectable="on" class="k-icon k-i-calendar"> 
     select 
     </span> 
    </span> 

    <span class="k-widget k-datepicker k-header" ng-class={{classValidationControl}} style="border: solid"> 
     <span class="k-picker-wrap k-state-default"> 
     <input type="text" kendo-date-picker="" id="endDateTextbox-1" ng-change="addBorderToControl('endDateTextbox-0')"> 
     <span> 
     <span unselectable="on" class="k-icon k-i-calendar"> 
     select 
     </span> 
    </span> 
</div> 

var myApp = angular.module('myApp', []); 
function MyCtrl($scope) { 
    $scope.addBorderToControl = function(controlName) { 
    $('#' + controlName).element.parent().parent().addClass("validationControl"); 
    } 
} 

Answer 1

есть причина, вы используете Угловое v1.0.1?

Вы нарушили HTML - не закрывали <span>.

Вы повторяете ошибки, которые мы все сделали - возиться с внутренними контроллерами DOM. Вы никогда не должны этого делать.

TL; DR я изменил свой jsFiddle на работу по объяснению впереди:

http://jsfiddle.net/mickeyvip/kqzd5q98/3/

Позволяет разбить задачу, кроме:

jsFiddle не хватает проводке вашего MyCtrl на угловой. Вы должны добавить:

myApp.controller('MyCtrl', MyCtrl); 

Теперь угловой может найти ваш MyCtrl и фактически запустить его.

Но Угловой будет кричать на вас, что он не может найти ngModel - переменную на $scope что Угловой хочет установить при изменении значения <input> элемента:

<input type="text" kendo-date-picker="" id="endDateTextbox-0" ng-model="startDate"> 

<input type="text" kendo-date-picker="" id="endDateTextbox-1" ng-model="endDate"> 

Далее мы будем называть validateEndDate() на ввод изменение, нет addBorderToControl(). Нам вообще не нужно addBorderToControl().

<input type="text" kendo-date-picker="" id="endDateTextbox-0" ng-model="startDate" ng-change="validateStartDate()"> 

<input type="text" kendo-date-picker="" id="endDateTextbox-1" ng-model="endDate" ng-change="validateEndDate()"> 

Каждая функция установит справедливость на правильную переменную на $scope:

$scope.validateStartDate = function() { 
    // validate $scope.startDate 
    var isValid = $scope.startDate === 'start'; 
    $scope.startDateValid = isValid; 
    } 

$scope.validateEndDate = function() { 
    // validate $scope.endDate 
    var isValid = $scope.endDate === 'end'; 
    $scope.endDateValid = isValid; 
    } 

Для этого примера я буду относиться к startDate действительным, если он равен "start" и endDate если он равен "end".

Теперь, когда у нас есть вся логика проверки, мы будем использовать директиву Angular ng-class на <span>, в которой вы нуждаетесь. ng-class не использовался правильно в вашем примере, он ожидает выражения в значении атрибута, поэтому нет необходимости обертывать его в {{ }}. Мы дадим ему объект с ключом = ваше именем класса и логическим значением, которое будет решать, если мы хотим, чтобы добавить этот класс (true) или удалить его (false):

<span class="k-widget k-datepicker k-header" ng-class="{validationControl: !startDateValid}"> 

<span class="k-widget k-datepicker k-header" ng-class="{validationControl: !endDateValid}"> 

Как вы видите, я удалил style="border: solid", потому что он переопределяет стиль границы, установленный в CSS.

Все. Теперь у нас есть рабочий пример, мы не манипулируем DOM, а выполняем только бизнес-логику.

Надеюсь, что это связано.

Answer 2

нг-изменение требует нг-модель

<input type="text" kendo-date-picker="" id="endDateTextbox-0" ng-change="addBorderToControl('endDateTextbox-0')" ng-model="model1"> 

и вам нужно Jquery.

fiddle

-------------------------------------- -----

Edit:

<input type="text" kendo-date-picker="" id="endDateTextbox-1" ng-change="addBorderToControl('endDateTextbox-1')" ng-model="model2"> 

изменения ng-change="addBorderToControl('endDateTextbox-0') в ng-change="addBorderToControl('endDateTextbox-1')

-------------------------------------------

Edit 2:

без Jquery:

fiddle