Question

我试图弄清楚如何通过嵌套指令传递一个translude并绑定到最内层指令中的数据。您可以将其视为列表类型控件，将其绑定到数据列表，并且transclusion是您要用于显示数据的模板。这是一个仅限于单个值的基本示例（此处为plunk）。

HTML

F[String]

的javascript

<body ng-app="myApp" ng-controller="AppCtrl as app">
    <outer model="app.data"><div>{{ source.name }}</div></outer>
</body>

如您所见，转换后的位不会出现。有什么想法吗？

Answer 1

在这种情况下，您不必使用自定义transclude指令或任何技巧。我在您的代码中发现的问题是默认情况下将transclude编译到父作用域。因此，您可以通过实现指令的compile阶段来解决这个问题（这发生在链接阶段之前）。实现看起来像下面的代码：

app.directive('inner', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            source: '=myData'
        },
        template: '<div class="inner" ng-transclude></div>',
        compile: function (tElem, tAttrs, transclude) {
            return function (scope, elem, attrs) { // link

                transclude(scope, function (clone) {
                    elem.children('.inner').append(clone);
                });
            };
        }
    };
});

通过执行此操作，您将强制您的指令转换为其隔离范围。

Answer 2

感谢Zach的回答，我发现了一种解决问题的不同方法。我现在将模板放在一个单独的文件中，并将其传递到示波器中，然后使用ng-include插入。这是解决方案的Plunk。

HTML：

<body ng-app="myApp" ng-controller="AppCtrl as app">
    <outer model="app.data" row-template-url="template.html"></outer>
</body>

模板：

<div>{{ source.name }}</div>

的javascript：

angular.module('myApp', [])

.controller('AppCtrl', [function() {
    var ctrl = this;

    ctrl.data = { name: "Han Solo" };
}])

.directive('outer', function(){
    return {
        restrict: 'E',
        scope: {
            model: '=',
            rowTemplateUrl: '@'
        },
        template: '<div class="outer"><inner my-data="model" row-template-url="{{ rowTemplateUrl }}"></inner></div>'
    };
})

.directive('inner', function(){
    return {
        restrict: 'E',
        scope: {
            source: '=myData',
            rowTemplateUrl: '@'
        },
        template :'<div class="inner" ng-include="rowTemplateUrl"></div>'
    };
});

Answer 3

您可以将transclude一直传递给第三个指令，但我看到的问题是使用范围覆盖。您希望{{ source.name }}来自inner指令，但是当它在第一个指令中编译它时：

template: '<div class="outer"><inner my-data="model"><div ng-transclude></div></div></div>'

已使用{{ source.name }}范围编译outer。我能够以你想要的方式工作的唯一方法是用$compile手动完成...但也许比我聪明的人可以想到另一种方式。

Demo Plunker

如何通过Angular中的嵌套指令向下传递？

3 个答案: