In an angularjs application if you have encountered [$compile:multidir] error then you must be having multiple directives 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.

Example:
Codepen link

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>more than one directive on same element creates Error: $compile:multidir https://docs.angularjs.org/error/$compile/multidir</title>
    <script src="js/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.directive('firstDirective', function () {
            return {
                restrict: 'A',
                scope: {
                    fd: '@placeholder'
                },
                link: function (scope, element, attr, ctr) {
                    attr.$set('placeholder', scope.fd + ' changed by first')
                }
            }
        });
        app.directive('secDirective', function () {
            return {
                restrict: 'A',
                //replace the following line and everything works
                scope: true,
                link: function (scope, element, attr, ctr) {
                    console.dir(scope);
                    attr.$set('placeholder', element.attr('placeholder') + ' changed by second')
                }
            }
        });
    </script>
</head>
<body>
    <input type="text" name="fname" size="200" first-directive sec-directive placeholder="rushi" />
</body>
</html>
“No fun in coding if there were no bugs”
-Rushi

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>