How to encapsulate $scope in Angular.Js

Question

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'

Answer 1

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 .

Answer 2

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