如何将父指令的属性与子指令共享

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

本文关键字：指令 共享 属性      更新时间：2023-09-26

http://jsfiddle.net/Zuriel/fdrtpjgd/

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

假设父级和子级是<container><insides></insides></container>

如果你看看我的小提琴，你会发现这个孩子需要一些范围的帮助。如果我使用$scope，那么我会得到通行证，但它对每个指令都是相同的范围，这很糟糕。但是，如果我使用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>';
    },
  }
});

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

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

打字错误：

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

删除"$"符号；你不需要从属性分配。问候。

发表评论。。。

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

应该工作

相关文章：