Multiple Directives Error

[Gary Hanson]

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