Question

 $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中尝试了相同的代码，但它在那里没有用。

Answer 1

您需要添加$sce.trustAsHtml，因为按钮（与许多其他元素一样）不是一个可信任的元素，角度无法绑定：

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的字符串。

ng-bind-html不显示文本框，按钮等表单组件

1 个答案: