web-dev-qa-db-ja.com

$ sce.trustAsHtml内のレンダリングディレクティブ

ここにPlunkerを含めました： http://plnkr.co/edit/4vqV8toHo0vNjtfICtzI?p=preview

ボタンをDOMに追加しようとしています。クリックすると、それにバインドされている関数が実行されます。この場合、「テスト」を警告する必要があります。これがコードです。

コントローラ

app.controller('MainCtrl', function($scope, $sce) {
        $scope.trustedHtml = $sce.trustAsHtml('<button ng-click="testAlert()">Submit</button>');  

        $scope.testAlert = function () {
            alert('testing')
        };
});

HTML

<body ng-controller="MainCtrl">
    <div ng-bind-html="trustedHtml"></div>
</body>
angularjsangularjs-directiveangularjs-scope
23
rjm226

$sce.trustAsHtmlおよびng-bind-htmlは、ディレクティブを使用してHTMLを作成するためのものではありません。この手法は機能しません。

これは、angularは、最初にコンパイルしてからリンクすることによって機能するためです。適切な説明については、 概念的な概要 を参照してください。

つまり、trustAsHtmlで定義されたHTMLをリンクするまでに、angular）でng-clickディレクティブをコンパイル（したがって理解）するには遅すぎます。

HTMLを動的に追加するには、$compileサービス（および/またはディレクティブ）を確認する必要があります。 ドキュメントはこちら 。

26
Davin Tryon

Angular 1.6.1の場合、私に役立つ解決策を見つけました。

テンプレート：

<div ng-bind-html="trustAsHtml(content);" init-bind> </div>

コントローラ内：

    $scope.trustAsHtml = function(string) {
        return $sce.trustAsHtml(string);
    };

指令：

.directive('initBind', function($compile) {
return {
        restrict: 'A',
        link : function (scope, element, attr) {
            attr.$observe('ngBindHtml',function(){
                if(attr.ngBindHtml){
                     $compile(element[0].children)(scope);
                }
            })
        }
    };
})
10
Алексей Медведев