Error: [$compile:multidir] for Component Directive with Attribute Directive

Question

我需要一个 'sticky' 指令，当它位于页面顶部时向元素添加 css class 并且还指示其状态的变化。出于这个原因，我定义了一个像 { onStickyChange: '&' } 这样的范围。现在我想在 angularjs 组件中使用该指令，例如：

<my-component sticky on-sticky-change="$ctrl.onStickyChange(sticky)">
</my-component>

我希望指令在 my-component 为 sticked/unsticked 时通知父控制器。但是我收到以下错误：

Error: [$compile:multidir] Multiple directives [myComponent, sticky] asking for new/isolated scope on: http://errors.angularjs.org/1.6.2/$compile/multidir?p0=myComponent&p1=&p2=s…icky%3D%22%22%20on-sticky-change%3D%22%24ctrl.onStickyChange(sticky)%22%3E at angular.js:68 at assertNoDuplicate (angular.js:10049) at applyDirectivesToNode (angular.js:9237) at compileNodes (angular.js:8826) at compileNodes (angular.js:8838) at compileNodes (angular.js:8838) at compile (angular.js:8707) at angular.js:1847 at Scope.$eval (angular.js:18017) at Scope.$apply (angular.js:18117)

app.component('myComponent', {
    template: '<div style="height: 6000px; width: 100%; background-color: #ccf></div>',
    controller: function () {
        this.is = 'nothing';
    }
});

app.directive('sticky', ['$window', function($window) {
    return {
        restrict: 'A',
        scope: { onStickyChange: '&' },
        link: link
    };
    function link(scope, element, attributes) {
        if (typeof scope.onStickyChange !== 'function' ) {
            throw Error('Sticky requires change handler');
        }

        let sticky = isSticky(element);

        angular.element($window).bind('scroll', _.throttle(onWindowScroll, 60));

        function onWindowScroll() {
            let isNowSticky = isSticky(element);

            if (sticky === isNowSticky) {
                return;
            }

            sticky = isNowSticky;

            if (sticky) {
                element.addClass('sticky');
            }
            else {
                element.removeClass('sticky');
            }

            scope.onStickyChange({ sticky: sticky });
        }

        function isSticky(element) {
            return window.scrollTop() > element.position().top;
        }
    }

}]);

如何解决这个问题？

PS: 有一个plunk.

Answer 1

您不能在同一个元素上有两个请求隔离作用域的指令——它会在 Angular 中造成内部冲突。如果同一元素需要两个指令，则可以利用传递给 link 函数的 attrs 参数来捕获所需的任何值（并且您需要删除隔离范围 [=指令的 15=]）。

Answer 2

出现错误是因为组件指令和属性指令都在尝试创建隔离作用域。

来自文档：

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

解决方案是重新编写属性指令以在不创建隔离范围的情况下工作：

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

使用 $parse Service 计算 on-sticky-change 属性上的 Angular 表达式。

Error: [$compile:multidir] for Component Directive with Attribute Directive

Error: [$compile:multidir] for Component Directive with Attribute Directive

javascript

angularjs

angularjs-directive

angularjs-components

Error: $compile:multidir

Multiple Directive Resource Contention