需要从其父级检索数据以显示它的指令

时间:2014-05-24 20:46:30

标签: angularjs directive scopes

我想编写一个简单的指令,显示来自父级的数据列表。

父控制器有类似的东西     $ scope.datas = [1,2,3,4]

我应该如何编写指令?

  • 使用隔离范围并使用范围:{display:'='}

  • 使用子范围并直接引用$ scope.datas ??我发现那很难看。我想重用指令,所以我想传递一个属性来指示应该使用哪个父字段。换句话说,我想对指令说我的数据在$ scope.datas或$ scope.dumpthat。

谢谢!

1 个答案:

答案 0 :(得分:1)

我会使用isolated scope。您可以在子项中使用父作用域属性,但由于Angular使用原型继承,因此您必须注意如何访问(以及您将要访问的内容)。

这是一个简单的指令:

<强> HTML

<display-directive display="datas">Datas are:</display-directive>

<强>指令

app.directive("displayDirective", function(...) {
    return {
         restrict: "E",

         scope: {
             display: "=",
         },

         // Transclude will take the inner html of your directive and add it to
         // any div which contains the ng-transclude directive
         transclude: true,

         // replace will swap out the inner html of the directive scope with
         // the template you assign
         replace: true,

         template: [
             "<div class='data-class'>",
             "    <div class='data-prefix' ng-transclude></div>",
             "    {{ display }}",
             "</div>",
         ].join("\n"),

         link: function(scope, element, attributes) {
             // Initialize your directive here!
         }),
     };
});