angular.elementで作成したdivにng-clickを追加する

Question

私は、divという2つの子を持つ以下の指示文を持っています。 2番目のdiv（angular.elementで作成）はclickeableでなければなりません。 angular.elementで作成したので、attr関数を使用してng-clickを追加しようとしていますが、これは機能しません。このコードで何が問題になっていますか？

 app.directive('mydir', function() { 

       var directive = {}; 

       directive.restrict = 'EA'; 

       directive.replace = true; 

       directive.scope = { 
        control: '=', 
       }; 

       directive.template = '<div id="root"></div>'; 

       directive.link = function (scope, element, attrs) { 

         var wrap = angular.element('<div id="wrap"></div>'); 
         element.append(wrap);        
         var node = angular.element('<div id="node"></div>'); 
         node.attr('ng-click', 'toggle()'); // <--- this doesn't work 
         wrap.append(node); 

         scope.toggle = function() { 
          alert('clicked'); 
         }; 
       }); 

       return directive; 

      }); 

Answer 1

要素は、角度の$compileサービスを使用してコンパイルする必要があります。

 app.directive('mydir', function ($compile) { // added dependency here 

       var directive = {}; 

       directive.restrict = 'EA'; 

       directive.replace = true; 

       directive.scope = { 
        control: '=', 
       }; 

       directive.template = '<div id="root"></div>'; 

       directive.link = function (scope, element, attrs) { 

         var wrap = angular.element('<div id="wrap"></div>'); 
         element.append(wrap);        
         var node = angular.element('<div id="node"></div>'); 
         node.attr('ng-click', 'toggle()'); // <--- this doesn't work 
         var content = $compile(node)(scope); 
         wrap.append(content); 

         scope.toggle = function() { 
          alert('clicked'); 
         }; 
       }); 

       return directive; 

      }); 

Hereの短いチュートリアル$compileを使用することに。うまくいくと助けてくれる