如何使用自定義元素點擊事件更新範圍值？

Question

在我的directive中，我將根據index值替換模板。當用戶點擊模板時，我需要將點擊的directive值分配給scope值。

我無法直接撥打scope這裏的replaced元素。如何處理這種情況？

這裏是我的directive代碼：

var allAppsGallery = function ($compile) { 

    return { 

     replace : true, 

     scope : { 
      index : "=", 
      app : '=' 
     }, 

     link : function (scope, element, attrs) { 

      var getTemplate = function (index, app) { 

       switch (index) { 

        case 0 : 
        case 13 : 
        case 14 : 
        case 15 : 
        case 5 : 

         return $('<div />', 
            { 
             class:'bgr box'+index, 
             html : '<h2>'+app.completion+'%</h2><span>'+app.name+'</span>', 
             click : function() { 
              alert("hi"); //click works here 
         //but how to update the scope variable? 
             } 
            } 
           ); 

         break; 


       } 

      } 


      element.html(getTemplate(scope.index, scope.app)); 
      $compile(element.contents())(scope); 
      element.replaceWith(element.contents()); 

      element.click(function(event) { //click event not works. 

       scope.activeApp = scope.app; //the new value on click need to update 
       scope.$appy(); 

      }); 



     } 

    } 

} 

這裏有一個現場演示：

LIVE DEMO FOR TEST

Answer 1

更好的辦法是結合ng-click編譯元素之前：

case 5: 
    return '<div class="bgr" ng-class="\'box\' + index" ng-click="action()">' + 
       '<h2>{{app.completion}}</h2><span>{{app.name}}</span>' 
      '</div>'; 

...

scope.action = function() { 
    scope.activeApp = scope.app; 
}; 

Updated demo