CODEWITHSUNDEEP
javascriptangularjsdatepicker
user5443928
user5443928

Reputation:

Getting Error: [$compile:multidir] using Angular.js

I am getting the following error while using datepicker of Angular.js.

Error message

Error: [$compile:multidir] http://errors.angularjs.org/1.4.6/$compile/multidir?p0=datepicker&p1=&p2=da…-prev%3D%22%3Ci%20class%3D%26quot%3Bfa%20fa-arrow-circle-left%26quot%3B%3E
    at Error (native)
    at http://oditek.in/Gofasto/js/angularjs.js:6:416
    at Q (http://oditek.in/Gofasto/js/angularjs.js:69:353)
    at D (http://oditek.in/Gofasto/js/angularjs.js:62:492)
    at http://oditek.in/Gofasto/js/angularjs.js:68:182
    at http://oditek.in/Gofasto/js/angularjs.js:118:334
    at n.$eval (http://oditek.in/Gofasto/js/angularjs.js:132:452)
    at n.$digest (http://oditek.in/Gofasto/js/angularjs.js:129:463)
    at n.$apply (http://oditek.in/Gofasto/js/angularjs.js:133:236)
    at g (http://oditek.in/Gofasto/js/angularjs.js:87:376)

I am explaining my code below.

<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Date :</span>
<datepicker date-format="dd-MM-y" button-prev='<i class="fa fa-arrow-circle-left"></i>' button-next='<i class="fa fa-arrow-circle-right"></i>'> 
<input type="text" name="birthdate" class="form-control" ng-model="date" placeholder="Add date" />
</datepicker>
</div>

I have already included the 720kb.datepicker module and added the respective css and js files.Still i am getting the above type of error.

Please help me to resolve this error.

Upvotes: 0

Views: 170

Answers (1)

ibrahimbayer
ibrahimbayer

Reputation: 262

Angularjs is exporting a url to explain the error message which is

https://docs.angularjs.org/error/$compile/multidir?p0=datepicker&p1=&p2=da%E2%80%A6-prev%3D%22%3Ci%20class%3D%26quot;fa%20fa-arrow-circle-left%26quot;%3E

in your case and explanation locates your prev button definition.

Multiple directives [datepicker, da…-prev="{3}] asking for {4} on: {5}

Description 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.

To resolve this issue remove one of the directives which is causing the collision.

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

Multiple directives requesting isolated scope. Multiple directives publishing a controller under the same name. Multiple directives declared with the transclusion option. Multiple directives attempting to define a template or templateURL.

Most probably button-prev or button-next is overlaping with datepicker directive.

Upvotes: 1

Related Questions