Question

我正在使用名为“teeth”的角度自定义指令在HTML页面上创建多个canvas元素。我在牙齿指令中放置了另一个自定义指令'draw'，我想在canvas元素点击时调用'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 directive，以便更好地了解每当使用 ng-include 符合您的需求时，以及何时应使用编译

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

2 个答案: