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

我正在使用名为'teeth'的角度自定义指令在HTML页面上创建多个画布元素。我在另一个自定义指令'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); 
}());

来源

2016-11-30 Arunwij

使用指令模板而不是通过jQuery修改HTML - 这种方式会自动编译链接模板中的引用指令。 –

当您使用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>

来源

2016-11-30 07:58:06 Aruna

长的答复是，有更多的则是1个解决这个用例

请注意这个帖子AngularJS: ngInclude vs directive更好地了解每当使用ng-include将适合您的需求，当您应该使用编译改为

来源

2017-11-27 10:15:45 ymz

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

回答

相关问题