Question

我的代码非常简单

<body ng-app="app">
<outer>
    <inner param="vm.test" param2="vm.test2"></inner>
</outer>
</body

我的指令和控制器看起来像

    function outerCtrl() {
        this.test = 'First test';
        this.test2 = 'Second Test';
    }

    function innerCtrl() {}

    angular
        .module('app', [])
        .controller('OuterCtrl', outerCtrl)
        .directive('outer', function() {
            return {
                // scope: {},
                restrict: 'E',
                transclude: true,
                template: "<div>I'm the outer part <br/> <ng-transclude></ng-transclude>",
                controller: "OuterCtrl as vm",
                bindToController: true
            }
        })
        .controller('InnerCtrl', innerCtrl)
        .directive('inner', function() {
            return {
                scope: {},
                require: '^^outer',
                restrict: 'E',
                template: "I'm the inner part - {{vm.param}} and {{vm.param2}}",
                controller: "InnerCtrl as vm",
                bindToController: {
                    param: '=',
                    param2: '='
                }
            }
        });

实际上它有效。但是当我为外部指令定义隔离范围时，它会被破坏（如果我只是取消注释外部指令的范围定义）如何解决这个问题？

https://codepen.io/ponomarev_aleksandr/pen/ypQymP

Answer 1

为什么不起作用

在您的工作示例中，您不会将父指令中的数据传递给子级。由于外部指令默认为scope:false，因此它不会创建自己的作用域，因此它位于外部作用域（在本例中为根作用域）和{{ 1}}在根范围内作为OuterCtrl属性。实际上，您将数据从根范围传递到vm指令。

当您取消注释inner外部指令创建自己的具有scope: {}属性的隔离范围时，您不能在外部范围（根范围）中使用它。您只能在vm指令内（在其模板中）使用它。

如何使用隔离范围进行修复：

1）您可能需要将outer指令放入inner指令模板中。然后，您将能够将外部指令中的数据传递给内部指令。

2）如果第一种方法无法使用outer指令中的外部范围（此处为根范围）：

2.1）通过$ scope。$ parent。但在大多数情况下，这不是最佳方法，因为此代码变得脆弱。

2.2）在根范围中引入其他变量，并将它们双向绑定到outer指令的范围变量，然后将它们传递给outer指令

为什么来自父指令的数据不会传递给子指令

1 个答案: