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

Calling directive function from child directive not working

本文关键字：指令 不起作用 函数 调用      更新时间：2023-09-26

>我正在尝试使用其他人创建的指令来告诉我的指令，当它内部的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 指令调用它，该指令可能是表指令深处的元素。除此之外，我不想更改 repeatDone 指令，并且 repeatDone 不需要甚至不知道 myTable 指令。

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

    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)
                });
            }
        }
    }
});

编辑：

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

.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浏览器

希望这有帮助

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

相关文章：