$ sce.trustAsHtml経由でng-clickにアクセスする

Question

ng-click関数（updateRating）にアクセスするにはどうすればよいですか？

https://jsfiddle.net/by2jax5v/171/

私はそれが$compiledないとして$のscope.content

$scope.bindHTML = $sce.trustAsHtml($scope.content); 

Answer 1

をレンダリングするために$ sce.trustAsHtmlを使用しています。 AngularにそのHTMLを検索し、その中のディレクティブをコンパイルするよう指示しません。カスタムディレクティブを使用する必要があります。

fiddleが更新されました。

var myApp = angular.module('myApp', []); 

myApp.controller('MyCtrl', function($scope) { 

    $scope.content = "This text is <em>html capable</em> meaning you can have <a ng-click='updateRating(1)' href=\"#\">all</a> sorts <b>of</b> html in here."; 
    $scope.updateRating = function(message) { 
     alert(message); 
    } 

}); 

myApp.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); 
     } 
    ); 
    }; 
}]); 

Answer 2

あなたの上記のコードはコンパイルさんが、それは安全でないとして、アンカータグを考慮した角度JSで消毒され、したがって、NG-クリック動作しません。

ng-html-compileをng-bind-htmlの代わりにfrancis bouvierで達成したい場合は、達成することができます。それは私がちょうど1kbを見た最も薄い図書館です。 https://github.com/francisbouvier/ng_html_compile

https://stackoverflow.com/a/41790235