AngularJS添加css类到父div

Question

我想添加类到父项与angularjs。我是新来的角和jquery小确定。是否有任何具体的方法来添加边界到父跨度的父级时，对文本框控件进行ng更改。这个场景对我来说是因为我试图在ng-repeat中使用一个kendo日期选择器，并且必须添加一个红色边框来控制是否存在任何验证错误。 Telerik kendo 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); 

现在Angular可以找到您的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"。

现在我们已经有了所有验证逻辑，我们将在您需要的<span>上使用Angular的指令ng-class。 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

NG-变化需要NG-模型

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

，你需要jQuery的。

fiddle

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

编辑：

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

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

编辑2：

没有jQuery的：

fiddle