错误：[$编译：multidir对于组件指令与属性指令(Error: [$compile:multi

我需要一个“粘”指令，增加了一个CSS类元素时，它是在页面的顶部，也标志着其状态的变化。出于这个原因，我定义就像一个范围{ onStickyChange: '&' } 现在，我想使用该指令在angularjs组件，如：

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

我期待的指令时，我的分量被贴/取消置顶通知父控制器。不过，我得到以下错误：

错误：[$编译：multidir]多个指令[myComponent的，置顶]寻求新/隔离范围上： http://errors.angularjs.org/1.6.2/$compile/multidir?p0=myComponent&p1=&p2=s...过甜％3D％22％22％20on粘性变％3D％22％24ctrl.onStickyChange（粘）％22％3E在angular.js：68在assertNoDuplicate（angular.js：10049）在applyDirectivesToNode（angular.js： 9237）在compileNodes（angular.js：8826）在compileNodes（angular.js：8838）在compileNodes（angular.js：8838）在编译（angular.js：8707）在angular.js：1847年在$范围的eval（ angular.js：18017）在$范围应用（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：有一个普拉克。

Answer 1:

因为无论是组件指令和属性指令正在试图建立一个分离的范围出现的错误。

从文档：

错误：$编译：multidir
多重指令资源争
当多个指示被施加到相同的DOM元素，并处理它们将导致碰撞或不支持的配置发生该错误。
应用到相同的元件的多个不兼容的指令的实施例方案包括：
多重指令，要求隔离范围。
- AngularJS错误参考-错误：$编译：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 ...
    }
});

使用$解析服务，以评估对角的表达on-sticky-change属性。