Question

注意：ui-grid是我的自定义网格的名称。对此感到抱歉。

我有一个自定义指令，它将有一个子自定义指令，并将在html中以这种方式调用。

<ui-grid resource="/api/data.json">
            <ui-gridcolumns>
            </ui-gridcolumns>
        </ui-grid>

当child指令包含在parent指令中时，控制台语句不会打印，但是当child指令在parent指令之外时，它会打印console.log就好了。非常了解如何使它在父指令中使用子指令。

父指令：

module.exports = function () {
    return {
        restrict: 'E',
        templateUrl: 'app/ui-grid/grid.template.html',
        link: function (scope, element, attrs) {
            console.log('linked Grid');
        },
        controller: ['$scope', function ($scope) {
            $scope.onthescreen = 'test value';   
        }]
    };
};

儿童指令：

module.exports = function () {
    return {
        restrict: 'E',
        templateUrl: 'app/ui-grid/gridcolumns/grid.columns.template.html',
        link: function (scope, element, attrs) {
            console.log('linked Grid Columns');
        },
        controller: ['$scope', function ($scope) {
            console.log('calling Grid Columns');
        }]
    };
};

整个代码库都在git中供参考。

https://github.com/eshrinivasan/angular-gulp-browserify-boilerplate

Answer 1

要实现所需的行为，请使用包含：

config：

restrict: 'E',
templateUrl: 'app/ui-grid/grid.template.html',
link: function (scope, element, attrs) {
   console.log('linked Grid');
},
controller: ['$scope', function ($scope) {
     $scope.onthescreen = 'test value';   
}],
transclude: true

和模板中的某个地方：

<div ng-transclude>
   child directives will be placed here
</div>

自定义指令 - 子指令在括在父指令

1 个答案: