Question

我有一个嵌套的父子指令，目的是绘制一个表.. 从父（标记）中调用时，不会调用child指令。它独立测试时工作正常。我似乎遵循了所有的规则/语法，要求就位。我没有看到我在child指令中的控制台日志语句，也没有日志中的错误。

指令 -

    var app = angular.module ('gridapp', []);

    app.directive ('gridControl', function(tableDataFactory){

        return {

            restrict: 'E',
            scope : {},
            controller : function($scope){

                $scope.columns = [];
                $scope.column = [];

                $scope.addColumnProperties = function(columnProperties) {
                    console.log("In addColumnProperties "+ columnProperties);
                    $scope.column = columnProperties;                   
                    $scope.columns.push($scope.column);

                    $scope.column = [];
                }
            },

            link : function (scope, element, attrs) {

                 console.log(attrs.source);

                 tableDataFactory
                    .get(
                            'http://localhost:8000/AngularTableWidget/json/accounts.json')
                    .then(
                            function(data) {
                                scope.items = data.items;
                                console.log("In grid directive" + scope.items);
                            });
            },

            templateUrl : '../template/gridtemplate.html'
        };
    });

    //child directive...
    app.directive('tableColumn', function(){

        return{
            restrict : 'E',
            scope : {}, 
            require : '^gridControl',

            link : function(scope, element, attrs, gridCtrl) {
                console.log("In tablecolumn "+ attrs.source);
                var colProp = [];
                console.log("In tablecolumn "+ attrs.caption);
                colProp.push(attrs.caption);
                colProp.push(attrs.source);

                gridCtrl.addColumnProperties(colProp);
            }
        };
    });

HTML -

<div>

<grid-control source="gridtable.json">  

 <table-column caption="Name" source="name"> </table-column>
 <table-column caption="Account" source="account"> </table-column>

 </grid-control>

模板 -

<div>

 <table>
 <tbody ng-repeat="row in items track by $index">
  <tr ng-repeat ="col in columns">
    <td>
    Test
    </td>
  </tr>  
  </tbody>
 </table>

</div>

Answer 1

在grid-control指令上，添加transclude = true。在网格控件模板中，添加ng-transclude将插入子指令的位置。如果不使用transclude，系统将忽略子指令。

我希望这会有所帮助。

奥斯汀

AngularJS Child指令未被调用

1 个答案: