directive can not ''require:ngRepeat'

问题

I write below directive to make call a function when ngRepeat element gets rendered on UI.

Directive

directives.directive('repeatDone', function() {
    return {
        restrict: 'A',
        require: 'ngRepeat',
        link: function(scope, element, attrs, ngModel) {
            if (scope.$last) {
                scope.$eval(attrs.repeatDone);
            }
        }
    };
});

But it is giving $compile error. If I remove require part, it works OK.

Why AngularJS can not accept "require: 'ngRepeat'"? Help would appreciated.

回答1:

require is used for accessing the controller of another directive. But ng-repeat does not have a controller. Take a look at the source for ng-repeat, the word controller doesn't even appear in the code. The documentation also makes no mention of a controller for ng-repeat.

Typically, when you use require it's because you want to call functions of the required controller. In the link function for your directive you've added the argument ngModel -- which is what would be populated with the controller if it existed. But you never use this ngModel argument in the code. It's not really clear why you need to use require at all in this case.

EDIT:

On further review, perhaps you're trying to require ng-repeat because your repeat-done directive won't work outside the context of an ng-repeat. If that's the reason, another solution might be to traverse the DOM looking at the parent elements of your repeat-done directive to see if they have the attribute 'ng-repeat'. If not found, your directive could throw an error. But that seems like a lot more code w/little return on investment...

回答2:

You should you $timeout before evaluating a scope. Because when you write code inside timeout, $timeout will run exactly after current digest cycle gets complete.

Or you can use scope.$evalAsync instead of scope.$eval

$timeout which implicitly calls $apply() after a delay & $apply runs $digest cycle call exactly after DOM redered element on browser

$evalAsync maintain async queue, and gets called after digest cycle call exactly before DOM redered element on browser

CODE

directives.directive('repeatDone', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, ngModel) {
            if (scope.$last) {
                $timeout(function () {
                    scope.$eval(attrs.repeatDone);
                });
                //or you can use 
                //scope.$evalAsync(attrs.repeatDone);
            }
        }
    };
});

Thanks.

来源：https://stackoverflow.com/questions/28386289/directive-can-not-requirengrepeat

标签

angularjs

angularjs-directive

angularjs-ng-repeat

ng-repeat

directive