我查看代碼：指令代碼的
<div ng-repeat = "i in items track by $index">
<myDirective label = "i.labels"> </myDirective>
</div>
配件：
return {
scope : {
label : '='
}
link : function($scope, elem, attrs){
$scope.$watch('label', function(v){
if(v[1] == "somevalue"){ // apply a css style to this ng-repeat item.}
});
}
}
我想CSS樣式應用到基於v[1]當前元素。在一個指令中實現這個的「角度方式」是什麼？
您不必在示例中更改指令中的樣式。你可以簡單地這樣做：
<div ng-repeat="i in items track by $index"
ng-style="{ background: i.labels[1] == 'somevalue' ? 'red' : 'blue' }">
<myDirective label="i.labels"></myDirective>
</div>
但如果你真的想要的樣式從指令改變，那麼在我看來，你應該把外層的div指令的視野內。這樣，你可以輕鬆操縱它。
角表達式是否支持三元操作？ –
他們沒有，你必須做i.labels [1] =='somevalue'&&'red'|| 'blue' – doodeec
他們自從Angular 1.1.5開始。 –
在指令中可以使用jqLite選擇器來查找父ng-repeat div。然後，如果滿足所需的條件，則可以應用特定的課程。
我已經創建了下面的示例應用程序。
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [{
labels: ["red", "black"]
}, {
labels: ["faint-green", "green"]
}, {
labels: ["pink", "orange"]
}, {
labels: ["USA"]
}];
}).directive('mydirective', function() {
return {
restrict: 'AE',
scope: {
label: '='
},
link: function($scope, elem, attrs) {
$scope.repeatingElem = $(elem).parent('div[ng-repeat]');
$scope.$watch('label', function(v) {
if (v[1] == "green") {
// apply a css class to ng-repeat element.
$scope.repeatingElem.addClass('bg-success');
}
});
}
}
});
的index.html
<!doctype html>
<html ng-app="plunker">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script>
document.write("<base href=\"" + document.location + "\" />");
</script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="i in items">
<mydirective label="i.labels"></mydirective> {{i.labels}}
</div>
</body>
</html>
看看這裏的數據綁定在一個指令**的http：//計算器的.com /問題/ 13294507 /雙向數據結合功能於一個gularjs-directives **，只是使用樣式而不是值 – Johnny000
@ Johnny000：我在上面實現數據綁定的方式有什麼問題嗎？ –
我不知道你爲什麼要使用手錶，但如果你真的不需要，儘量避免使用$ watch，因爲它不利於性能** http：//angular-tips.com/blog/ 2013/08 /刪除不需要的手錶/ ** – Johnny000