how can i share attributes on a parent directive with a child directive

Question

if you take a look at http://jsfiddle.net/Zuriel/fdrtpjgd/

my issue is how can I pass a attribute from a parent directive into a nested child directive.

assuming the parent and child is <container><insides></insides></container>

if you look at my fiddle you will see that the child needs some scope help. if i use $scope then I get the pass but its the same scope for every directive, which is bad. but if i use scope, then it works internally for each directive but the parent attribute isn't getting passed through. Do I need a compile? to pass through and compile? or can I do this with a link and I am just missing something.

app.directive('container', function() {
  return {
      restrict: 'EA',
      replace: true,
      transclude: true,
      $scope: {
          passthrough: '@'
      },
      link: function($scope, element, attrs) {
          $scope.passthrough = attrs.greeting;
          console.log($scope.passthrough);
      },
      template: '<div class="container">{{passthrough}} <div ng-transclude></div></div>'
   }
 });

app.directive('insides', function() {
      return {
      restrict: 'EA',
      replace: 'true',
      require: '^container',
      transclude:true,
      //template: '<div class="insides">{{passthrough}} <span ng-transclude></span></div>'
      template: function ($scope) {
          console.log($scope.passthrough);
          return '<div class="insides">{{ passthrough }} <span style="color:red" ng-transclude></span></div>';
    },
  }
});

Answer 1

Follow the answer here, I think it will help you

http://jsfiddle.net/Wijmo/MTKp7/

and some code sample is here

angular.module("btst", []).
directive("btstAccordion", function () {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {},
        template:
            "<div class='accordion' ng-transclude></div>",
        link: function (scope, element, attrs) {

            // give this element a unique id
            var id = element.attr("id");
            if (!id) {
                id = "btst-acc" + scope.$id;
                element.attr("id", id);
            }

            // set data-parent on accordion-toggle elements
            var arr = element.find(".accordion-toggle");
            for (var i = 0; i < arr.length; i++) {
                $(arr[i]).attr("data-parent", "#" + id);
                $(arr[i]).attr("href", "#" + id + "collapse" + i);
            }
            arr = element.find(".accordion-body");
            $(arr[0]).addClass("in"); // expand first pane
            for (var i = 0; i < arr.length; i++) {
                $(arr[i]).attr("id", id + "collapse" + i);
            }
        },
        controller: function () {}
    };
}).
directive('btstPane', function () {
    return {
        require: "^btstAccordion",
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            title: "@",
            category: "=",
            order: "="
        },
        template:
            "<div class='accordion-group' >" +
            "  <div class='accordion-heading'>" +
            "    <a class='accordion-toggle' data-toggle='collapse'> {{category.name}} - </a>" +

            "  </div>" +
            "<div class='accordion-body collapse'>" +
            "  <div class='accordion-inner' ng-transclude></div>" +
            "  </div>" +
            "</div>",
        link: function (scope, element, attrs) {
            scope.$watch("title", function () {
                // NOTE: this requires jQuery (jQLite won't do html)
                var hdr = element.find(".accordion-toggle");
                hdr.html(scope.title);
            });
        }
    };
})

Answer 2

typo:

  $scope: {
      passthrough: '@'
  },
  link

remove the '$' symbol; and you don't need to assign from attrs.greeting.

... comment out...

      link: function($scope, element, attrs) {
          //$scope.passthrough = attrs.greeting;
          console.log($scope.passthrough);
      },

should work