在自定义指令模板中调用自定义指令

Question

我正在使用称为“牙齿”的有角度的自定义指令在HTML页面上创建多个画布元素。 我在牙齿指令中放置了另一个自定义指令'draw'，我想在单击画布元素时调用'draw'指令。 我已经尝试过了，但是元素点击事件不起作用。 请给我建议一个解决方案。

(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);
}());

Answer 1

在另一个指令中使用directive ，应使用$compile进行编译，并使用replaceWith对其进行呈现，如下所示。

工作片段 ：

 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> 

Answer 2

长答案是针对此用例的解决方案不止一种

请注意这篇文章AngularJS：ngInclude vs指令，以更好地理解何时使用ng-include会适合您的需求以及何时应使用compile来代替