CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
WJA
WJA

Reputation: 7004

Error 'Multiple Directive Resource Contention' when creating custom directive and using UI-bootstrap

I am trying to create a directive that has as input the rating and which plots stars in the DOM based on this input.

However, when I try the following:

.directive('stars', function (Utils) {

    return {
        restrict: 'AE', //E = element, A = attribute, C = class, M = comment  
        transclude: true,
        template: "{{starsObj}}",
        link: function (scope, element, attrs) {

           scope.starsObj = Utils.returnStars(attrs.rating)

        } 
    }

})

where Utils.returnStars(attrs.rating) returns an array (which I would like to use later).

... I get the following error:

Multiple Directive Resource Contention

https://docs.angularjs.org/error/$compile/multidir?p0=rating&p1=%20(module:%20ui.bootstrap.rating)&p2=stars&p3=%20(module:%20noodl.controllers-product)&p4=template&p5=%3Cspan%20ng-mouseleave%3D%22reset()%22%20rating%3D%225%22%3E

Removing ui-bootstrap from my projects resolves the issue, but I do need ui-bootstrap in the end.

What is going on?

Upvotes: 1

Views: 1837

Answers (1)

Ilya Dmitriev
Ilya Dmitriev

Reputation: 1720

You don't need to add 'scope.' prefix to your variables from directive scope, so you should change your template attribute of the directive to this:

return {
    restrict: 'AE', //E = element, A = attribute, C = class, M = comment  
    transclude: true,
    template: "{{starsObj}}", //You don't need 'scope.' prefix.
    link: function (scope, element, attrs) {

       scope.starsObj = Utils.returnStars(attrs.rating)

    } 
}

Demo on plunker.

UPD: But I see that your error from the console is related to ui-bootstrap. Can you provide code more code, where you use it?

UPD2: The issue here is that ui.bootstrap has his own rating directive. So, to solve this problem you can just rename your rating attribute of stars directive to something else. I updated my plunker.

Upvotes: 1

Related Questions