ng-clic in ng-bind-html non si attiva quando cambio dinamicamente html

Question

Ho creato una direttiva che visualizza un messaggio, in più può eseguire il rendering di qualsiasi messaggio html con attributi angolari, potrebbe includere pulsanti, tag di ancoraggio (con ng -clicks attributo) e così via ..

index.html:

<ir-error-panel status="status"></ir-error-panel> 

irErrorPanel.tpl.html:

<div > 
    THE MESSAGE IS:<BR> 
    <div ng-bind-html="textHtmlSafe"></div> 
    </BR> 
</div> 

irErrorPanel.js:

angular.module('ng-iridize-common.directives').directive('irErrorPanel', ['$sce', function($sce) { 
    return { 
     restrict: 'E', 
     templateUrl: 'irErrorPanel.tpl.html', 
     controller: ['$scope', '$log', function($scope, $log) { 

      var _this = this; 

      _this.applyMessageText = function applyMessageText() { 
       $scope.textHtmlSafe = $scope.status && $scope.status.text ? $sce.trustAsHtml($scope.status.text) : ""; 
      }; 

      _this.applyMessageText(); 

      $scope.$watch("status.text", function(newValue, oldValue) { 
       if (newValue === oldValue) { 
        return; 
       } 
       if (!newValue) { 
        $scope.textHtmlSafe = ""; 
        return; 
       } 
       _this.applyMessageText(); 

      }); 


     }], 
     link: function(scope, iElement, iAttrs, ctrl) { 
      //call service and check box status. 
      scope.$watch("status.text", function(value) { 
       $compile(iElement.contents())(scope); 
      }) 
     } 
    } 
}]); 

quando, ad esempio lo stato è: "click!", Rende perfettamente bene, ma ng-click non scatta nulla.

Answer 1

Ho finito per creare una nuova direttiva suggerita here che compila dinamicamente html.

.directive('compile', ['$compile', function ($compile) { 
    return function(scope, element, attrs) { 
     scope.$watch(
      function(scope) { 
       // watch the 'compile' expression for changes 
       return scope.$eval(attrs.compile); 
      }, 
      function(value) { 
       // when the 'compile' expression changes 
       // assign it into the current DOM 
       element.html(value); 

       // compile the new DOM and link it to the current 
       // scope. 
       // NOTE: we only compile .childNodes so that 
       // we don't get into infinite loop compiling ourselves 
       $compile(element.contents())(scope); 
      } 
     ); 
    }; 
}]) 

e in irErrorPanel.tpl.html sostituire

<div ng-bind-html="textHtmlSafe"></div> 

con:

<div compile="status.text"></div>