call custom directive inside custom directive template

Question

I am using an angular custom directive called 'teeth' to create multiple canvas elements on the HTML page. I placed another custom directive 'draw' , inside teeth directive, I want to call 'draw' directive when canvas element clicked. I have tried this, but element click event is not working. Please suggest me a solution.

(function () {

var controller = function ($scope) {

};

controller.$inject = ['$scope'];

var teeth = function () {
    return {
        restrict: 'E',        
        controller: controller,
        link: function ($scope, element, attrs) {

            function init(){
                var count = 5;
                var html = '<div class="row">'

                for(var i=0; i<count;i++){
                    html += '<div class="test">'+
                                '<canvas id="'+i+'" width="58px" height="58px" draw></canvas>'+
                            '</div>';
                }
                html += '</div>';
                element.html(html);
            }

            init();
        }
    }
};

angular.module('graphApp').directive('teeth', teeth);
}());

(function () {
var controller = function ($scope) { 
};
controller.$inject = ['$scope'];
var draw = function () {
    return {
        restrict: 'A',    
        scope: {
            id: '@id' 
        },
        controller: controller,
        link: function ($scope, element, attrs) {
            element.on('click',function(event){
                alert('element '+$scope.id+' clicked');
            });
        }
    }
};
angular.module('graphApp').directive('draw', draw);
}());

Use a directive template instead of modifying the HTML via jQuery - this way angular will automatically compile and link referenced directives from the template. — Michael Rose, Nov 30 '16 at 07:50

score 1 · Accepted Answer · answered Nov 30 '16 at 07:58

When you use directive inside another directive, you should use $compile to compile it and use replaceWith it to render it as below.

Working snippet:

var app = angular.module('graphApp', []);

(function () {
var controller = function ($scope) { 
};
controller.$inject = ['$scope'];
var draw = function () {
    return {
        restrict: 'A',    
        scope: {
            id: '@id' 
        },
        controller: controller,
        link: function ($scope, element, attrs) {
            element.on('click',function(event){
                alert('element '+$scope.id+' clicked');
            });
        }
    }
};
angular.module('graphApp').directive('draw', draw);
}());

(function () {

var controller = function ($scope) {

};

controller.$inject = ['$scope'];

var teeth = function ($compile) {
    return {
        restrict: 'E',        
        controller: controller,
        link: function ($scope, element, attrs) {

            function init(){
                var count = 5;
                var html = '<div class="row">'

                for(var i=0; i<count;i++){
                    html += '<div class="test">'+
                                '<canvas id="'+i+'" width="58px" height="58px" draw></canvas>'+
                            '</div>';
                }
                html += '</div>';
                element.replaceWith($compile(html)($scope));
            }

            init();
        }
    }
};

angular.module('graphApp').directive('teeth', teeth);
}());

canvas {
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="graphApp">
   <teeth></teeth>
</div>

score 0 · Answer 2 · answered Nov 27 '17 at 10:15

0

The long answer is that there is more then 1 solution to this use-case

Please Note this post AngularJS: ngInclude vs directive to better understand whenever using ng-include will suit your needs and when you should use compile instead

answered Nov 27 '17 at 10:15

ymz

6,602
1
20
39

call custom directive inside custom directive template

2 Answers2