I have a pattern, which I want to use twice, but with different values. For example:
.directive("day", function($scope){
return {
template: '<div>{{day}}</div>'
}
}
Can I use it in two another directive, but encapsulate 'day' to see result like that:
<div>1</div>
<div>2</div>
Especially if I want to keep binding value of all 'day'
What you want is called an "isolate" scope where you bind an attribute of the directive from the local "isolate" scope to the parent scope.
app.directive('day', function(){
return {
scope: {
day: '='
},
template: '<div>{{day}}</div>'
}
})
HTML
<div ng-init="day1='Thursday'; day2='Friday'">
<div day="day1"></div>
<div day="day2"></div>
</div>
Result
Thursday
Friday
For more on directive scopes see the AngularJS $compile API Reference -- scope.
you meant something like this?
app.directive('day', function(){
return {
scope: {
dayValue: '='
},
template: '<div>{{dayValue}}</div>'
}
})
app.directive('outerDirective', function(){
return {
link: function($scope){
$scope.days = [1,2,3];
},
template: '<day day-value="day" ng-repeat="day in days"></day>'
}
})