I'm trying to write a simple Angular directive that displays an object properties, but I don't understand how the binding works.
<div ng-repeat="c in cars">
<div car carElement={{c}}></div>
<div>
.directive('car', function() {
return {
template: function(elem, attr){
var car = attr.carElement;
return car.brand + ' ' + car.model;
}
};
});
I can't bind the hole object, just simple properties. For example, this works:
<div ng-repeat="c in cars">
<div car brand={{c.brand}} ></div>
<div>
.directive('car', function() {
return {
template: function(elem, attr){
var brand = attr.brand;
return ''+brand;
}
};
});
How can I send the entire car to the directive template?
You have to pass the object, but not inside an expression:
<div ng-repeat="c in cars">
<div car carElement="c"></div>
<div>
Directive:
.directive('car', function() {
return {
scope: { car: "=carElement" },
template: function(elem, attr){
//you now have 'car' in scope.car
}
};
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.