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