Question

使用指令时，我有时会发现需要通过嵌套指令传递数据，即使中间指令不使用数据，也需要将其传递给子指令。这很烦人，因为它结合了指令并使布线变得非常困难。

考虑这个例子：MainCtrl在数组中保存一些数据并使用＆＃39; first-directive＆＃39;。该指令然后使用＆＃39; second-directive＆＃39;需要访问MainCtrl中的数据。因此，＆＃39; first-directive＆＃39;需要从MainCtrl获取数据并通过它 - 它本身对数据没有任何作用：

<body ng-controller="MainCtrl as mainCtrl">
    <first-directive data="mainCtrl.items"></first-directive>
</body>

和javascript：

app.controller('MainCtrl', function($scope) {
  var self = this;
  self.items = ["first", "second"];
});
app.directive('firstDirective', function() {
    return {
        scope: {
          data: '='
        },
        template: '<second-directive data="data"></second-directive>'
    };
});
app.directive('secondDirective', function() {
    return {
        scope: {
            data: '='
        },
        template: 'second directive data: {{data}}'
    };
});

如何更改上述代码，以便＆＃39; first-directive＆＃39;不需要了解数据？这是角度的常见问题吗？这通常如何解决？当涉及的指令嵌套更多时，问题会更加严重。

Plunker：https://plnkr.co/edit/aKWBq5DLOLFvamk6gx4e?p=preview

编辑：我发现了一篇讨论此事的博客文章。它建议使用＆＃39;要求＆＃39;在嵌套指令上。你怎么看？ http://www.codelord.net/2014/03/30/writing-more-maintainable-angular-dot-js-directives/

Answer 1

您可以通过存储您可以传入可以注入两个指令的服务所需的内容来实现此目的。以下是其他人这样做的一个很好的例子：

https://stackoverflow.com/a/13482919/5349719

Answer 2

您可以从所有directives移除范围，在所有情况下都不需要isolate范围...当您移除scope property时...您可以访问{{ 1}}直接在您的孩子controller中变量。

directive

这就是scope: { data: '=' },在JS中的工作方式，使得一个指令隔离你正在破坏链......那么当你需要将数据传递给嵌套的子指令时，你就会做这样的事情。

大多数情况下，您不需要prototyal inheritance本身。

Answer 3

您可以将scope设置为true以访问父控制器的范围。虽然您必须将项目设为$scope的属性。例如，见plunk。

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  // var self = this;
  // self.items = ["first", "second"];
  $scope.items = ["first", "second"];
});


app.directive('firstDirective', function() {
    return {
      scope:true,
        template: '<second-directive></second-directive>'
    };
});

app.directive('secondDirective', function() {
    return {
        scope:true,
        template: 'second directive data: {{items}}'
    };
});

＆＃13;

<!DOCTYPE html>
    <html ng-app="plunker">
    
      <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link rel="stylesheet" href="style.css" />
        <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
        <script src="app.js"></script>
      </head>
    
      <body ng-controller="MainCtrl as mainCtrl">
        <first-directive></first-directive>
      </body>
    
    </html>

＆＃13;

Answer 4

我更新了plnker，并且我指的是answer这两个指令都设置了

scope: false

default（scope：false） - 该指令不创建新范围，因此这里没有继承。该指令的范围与父/容器的范围相同。在link函数中，使用第一个参数（通常是范围）。复制

Angular - 将数据传递给嵌套指令

4 个答案: