カスタムディレクティブテンプレート内でカスタムカスタムディレクティブを呼び出す

Question

HTMLページに複数のキャンバス要素を作成するには、「歯」というカスタムカスタムディレクティブを使用しています。私は別のカスタムディレクティブ 'draw'を歯のディレクティブの中に配置し、キャンバスの要素がクリックされたときに 'draw'ディレクティブを呼び出したいと思います。私はこれを試しましたが、要素のクリックイベントは機能していません。私に解決策を提案してください。あなたが別のディレクティブ内directiveを使用する場合

(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

、あなたはそれをコンパイルする$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

長い答えは、このユースケース

にもっとして1つの溶液があるということですよりよく理解するために、この記事AngularJS: ngInclude vs directiveに注意してくださいng-includesをご使用の場合はいつでも、あなたのニーズに合わせて、コンパイル代わりに