Question

如果您查看http://jsfiddle.net/Zuriel/fdrtpjgd/

我的问题是如何将父指令中的属性传递给嵌套的子指令。

假设父母和子女是<container><insides></insides></container>

如果你看着我的小提琴，你会发现孩子需要一些范围帮助。如果我使用$ scope，那么我得到了传递但是每个指令的范围相同，这很糟糕。但是如果我使用范围，那么它在每个指令的内部工作，但父属性不会通过。我需要编译吗？通过并编译？或者我可以通过链接做到这一点，我只是遗漏了一些东西。

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

按照这里的答案，我认为它会对你有帮助

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

和一些代码示例在这里

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

错字：

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

删除＆＃39; $＆＃39;符号;而且你不需要从attrs.greeting分配。

......评论出来......

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

应该有效

如何在父指令上与子指令共享属性

2 个答案: