Hi,
In my angularJS (v1.7.8) app, I’ve received a ‘multiple directives error’
when attempting to create progress charts (via chart.js – i.e., pie and bar
types). I believe that I am issuing only one directive and confirmed that
angular-chart.min.js is executing one time only, so I don’t understand the
potential conflict. The description (below) states, "to resolve this issue
remove one of the directives which is causing the collision"; however, I
can find only one directive as indicated by the error.
These charts (using chart.js ver2.7.1) were working fine while I was on
angularJS ver1.4.7 prior to my implementation of ngflowchart (upgrading to
angularJS ver1.7.8). I am not sure if this is part of the problem or just
a coincidence and something else changed to cause the error. I have tried
numerous code changes without success.
*Here’s the directive statement (found in angular-chart.min.js) for
chartPie (one of the 9 chart directives):*
.directive("chartPie",["ChartJsFactory",function(t){return new t("pie")}])
*Here’s the canvas statement:*
canvas#homePieChart.chart.chart-pie(width='400', height='400',
chart-data='chartData', chart-labels='chartLabels',
chart-options='chartOptions', chart-colors='chartColors', title='for more
statistical details, go to client admin and dashboards',
ng-controller="chartBEprogressPieCtrl")
*Here's the complete error page given to me via Chrome developer tool
(debugger):*
*Error: $compile:multidir*
*Multiple Directive Resource Contention*
Multiple directives [ngController, chartPie] asking for new/isolated scope
on: <canvas id="homePieChart" width="400" height="400"
chart-data="chartData" chart-labels="chartLabels"
chart-options="chartOptions" chart-colors="chartColors" title="for more
statistical details, go to client admin and dashboards"
ng-controller="chartBEprogressPieCtrl" class="chart chart-pie">
*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.
Your help will be much appreciated!
Best regards,
Gary
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/e6cad933-73ba-4b1e-8541-981ff7c9f9b4n%40googlegroups.com.
