gpt4 book ai didi

javascript - 错误 : [$compile:multidir] for Component Directive with Attribute Directive

转载 作者:行者123 更新时间:2023-11-30 11:33:58 25 4
gpt4 key购买 nike

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

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

我希望指令在我的组件被粘贴/取消粘贴时通知父 Controller 。但是我收到以下错误:

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 .

最佳答案

错误发生是因为组件指令和属性指令都试图创建一个隔离作用域。

来自文档:

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 Serviceon-sticky-change 属性上评估 Angular Expression。

关于javascript - 错误 : [$compile:multidir] for Component Directive with Attribute Directive,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45196150/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com