Error: [$compile:multidir] For Component Directive With Attribute Directive

I need a 'sticky' directive that adds a css class to element when it is at the top of a page and also signals the changes in its state. For that reason I define a scope like { onSt

Solution 1:

The error occurs because both the component directive and the attribute directive are trying to create an isolate scope.

From the Docs:

Error: $compile:multidir

Multiple Directive Resource Contention

This error occurs when multiple directives are applied to the same DOM element, and processing them would result in a collision or an unsupported configuration.

Example scenarios of multiple incompatible directives applied to the same element include:

• Multiple directives requesting isolated scope.

— AngularJS Error Reference - Error: $compile:multidir

The solution is to re-write the attribute directive to work without creating an isolate scope:

app.directive('sticky', function($window, $parse) {
    return {
        restrict: 'A',
        ̶s̶c̶o̶p̶e̶:̶ ̶{̶ ̶o̶n̶S̶t̶i̶c̶k̶y̶C̶h̶a̶n̶g̶e̶:̶ ̶'̶&̶'̶ ̶}̶,̶
        scope: false,
        link: postLink
    };
    function postLink(scope, elem, attrs) {

        //code ...

            ̶s̶c̶o̶p̶e̶.̶o̶n̶S̶t̶i̶c̶k̶y̶C̶h̶a̶n̶g̶e̶(̶{̶ ̶s̶t̶i̶c̶k̶y̶:̶ ̶s̶t̶i̶c̶k̶y̶ ̶}̶)̶;̶
            $parse(attrs.onStickyChange)(scope, { sticky: sticky });

        //code ...
    }
});

Use the $parse Service to evaluate the Angular Expression on the on-sticky-change attribute.

Solution 2:

You can't have two directives requesting isolate scope on the same element-- it creates internal conflicts in Angular. If you need two directives for the same element, you can leverage the attrs argument passed to your link function in order to capture whatever values you need (and you'll need to remove your isolate scope property of the directive).