Javascript ng bind html不显示文本框、按钮等表单组件 $scope.data=“这里我们有文本框和按钮，在主“+”名称中包含基本“+”，在年龄范围内：：”；

这是我在ng bind html中使用的内容，但它不显示文本框和按钮。我在plunker中尝试了相同的代码，但在那里不起作用。

您需要添加按钮，因为按钮（与许多其他元素一样）不是受信任的元素。如果没有它，您可以绑定：

HTML:

---

使用

$compile

您可以告诉我如何编译字符串，以用作直接在视图中编写的HTML。

请使用

$scope.data

编辑您的问题，但是当我们在按钮上添加ng时，单击“showName（）”则不起作用。请帮助我解决此问题。因为这不是解决方法。如果您需要添加/删除HTMLB的一部分，请使用ng。但是如果html代码由后端api提供，那么在这种情况下，我们如何使用ng if。工作正常，但还有一个问题，如果我们希望在单击任何按钮时访问ng bind html外部ng bind html中文本框的内容，那么我们将如何操作？让我们来回答。

 $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>  

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

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

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