从子指令调用指令函数不起作用

Question

我正在尝试使用其他人创建的指令来告诉我的指令什么时候它里面的 ngRepeat 完成了自己的创建。

我的外部指令有一个隔离范围，并且有一个需要由内部指令调用的范围函数。这是代码。

angular.module('my.directives')

.controller('myTableCtrl', function($scope, $element, $attrs) {

    $scope.tableLoaded = function(tableName){
        console.log("Table Loaded");
    };

})

.directive('myTable', function() {
    return {
        restrict: 'EA',
        scope: {},
        controller: 'myTableCtrl as myTable'
    };
})

.directive('repeatDone', function($timeout) {
    return function(scope, element, attrs) {
        if (scope.$last) {
            $timeout(function(){
                scope.$eval(attrs.repeatDone);
            });
        }
    }
});

我的 HTML 看起来像这样。

<my-table>
    <div ng-repeat="row in tableRows" repeat-done="tableLoaded('main');"></div>
</my-table>

在我将 scope:{} 添加到 myTable 指令之前，当页面上有多个表时会变得非常混乱（tableLoaded 函数被调用但被错误的孩子调用），所以我添加了隔离范围，我认为是最佳实践。不幸的是，repeatDone 指令现在无法查看/调用父 myTable 指令中的 tableLoaded() 函数。

任何帮助将不胜感激。

编辑：

只是为了澄清。 tableLoaded() 是 myTable 指令的一个函数，我希望能够从 repeatDone 指令中调用它，但它可能是 table 指令深处的元素。除此之外，我不想更改 repeatDone 指令，并且 repeatDone 不需要甚至不知道 myTable 指令。

Answer 1

请查看以下解决方案。希望这会有所帮助:)

    angular.module('my.directives')

    .controller('myTableCtrl', function($scope, $element, $attrs) {

    this.tableLoaded = function(tableName){    //bind the function to controller rather than $scope
        console.log("Table Loaded");
    };

    })

    .directive('myTable', function() {
    return {
        restrict: 'EA',
        scope: {},
        controller: 'myTableCtrl as myTable'
    };
})

.directive('repeatDone', function($timeout) {
    return {
        restrict: 'EA',
        scope: true,  //your child directive might want to inherit stuff from the parent directive's controller maybe 
        require:'?^myTable',  //require the parent directive 
        link: function(scope, element, attrs,tableCtrl) {  //the controller of myTable is available as 4th param in link function (because of require)
            if (scope.$last) {
                $timeout(function(){
                    //scope.$eval(attrs.repeatDone);
                    tableCtrl.tableLoaded();    //call the function of the parent's directive (the specific instance)
                });
            }
        }
    }
});

编辑：

我正在考虑的问题是一次拥有多个表的可能性，每个表内部都有一个 repeatDone。 您可以做的是，您可以在完成范围时发出一个事件并将其捕获到您所需的控制器/指令中。或者，您也可以传递一个唯一标识符，以便它仅在特定控制器/指令内捕获。 示例如下：

.directive('repeatDone', function($timeout) {
    return {
        restrict: 'EA',
        link: function(scope, element, attrs) {
          console.log('in directive');
            var targetUID = attrs.target;
          console.log(targetUID);
            if (scope.$last) {
                $timeout(function(){

                  console.log('repeat-done now');//scope.$eval(attrs.repeatDone);
                    scope.$emit('repeat-done-' + targetUID,{});
                });
            }
        }
    };
});

在你的表格指令中：

.directive('myTable', function() {
    return {
        restrict: 'EA',
        controller: 'myTableCtrl as myTable'
    };
})

在你的表控制器中：

.controller('myTableCtrl', function($scope, $element, $attrs) {
    console.log('in table Ctrl');
            var self = this;
            $scope.tableUID = $attrs.tableId;
            self.tableLoaded = function(){
                console.log("Table Loaded");
            };
            console.log('tableUID' + $scope.tableUID);
            $scope.$on('repeat-done-' + $scope.tableUID, function(event,args){
              console.log('in catcher function');
                self.tableLoaded();
            });
})

然后使用

<my-table table-id="table1">
    <div ng-repeat="row in tableRows" repeat-done target="table1"></div>
</my-table>

这是一个有效的JSBIN

希望对你有帮助

Answer 2

我认为您可能需要在 my-table 上使用 ng-transclude 才能使用内部元素