1 
 $scope.data="<h2>here we have text boxes and button</h2><button type='button' class='btn btn-primary'>inside Basic</button>"+"<button type='button' class='btn btn-primary'>inside Primary</button>"+" Name inside<input type='text' name='namein' /><br>Age indise :: <input type='text' name='agein' /><br></form>"; 

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

これは ng-bind-html で使用した内容ですが、テキスト ボックスとボタンが表示されません。plunker で同じコードを試しましたが、そこでは機能しませんでした。

4

1 に答える 1

2

$sce.trustAsHtmlボタン (他の多くの要素と同様) は信頼できる要素ではないため、追加する必要があります。Angular はそれなしでバインドできます。

JSFiddle

angular.module('myApp', [])
.controller('dummy', ['$scope', '$sce', function ($scope, $sce) {
    $scope.data = $sce.trustAsHtml('<button type="button" class="btn btn-primary">a new button!</button>');
}]);

ng-bind-html 内で Angular 関数を使用する必要がある場合は、次のようなディレクティブが必要です ( credits ):

.directive('compileTemplate', function($compile, $parse){
    return {
        link: function(scope, element, attr){
            var parsed = $parse(attr.ngBindHtml);
            function getStringValue() { return (parsed(scope) || '').toString(); }

            //Recompile if the template changes
            scope.$watch(getStringValue, function() {
                $compile(element, null, -9999)(scope);  //The -9999 makes it skip directives so that we do not recompile ourselves
            });
        }         
    }
});

HTML:

<div ng-bind-html="data" compile-template></div>

を使用$compileすると、ビューに直接記述された HTML として使用される文字列をコンパイルするように指示できます。

于 2015-08-13T10:54:48.957 に答える