Angularjs标签不适用于ng-bind-html答案

【问题标题】：Angularjs tags not working with ng-bind-htmlAngularjs标签不适用于ng-bind-html
【发布时间】：2023-03-15 04:08:01
【问题描述】：

输入仅显示为平面 html 而不是 angularjs 输入材料。我找不到我的问题的确切解决方案

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-sanitize.js"></script>


<div ng-app="myApp" ng-controller="myCntrl">
   <div ng-bind-html="text1"></div>
   </div>
<script>
angular.module('myApp', ['ngMaterial', 'ngMessages', 'ngSanitize', 'ngAria'
])
.controller('myCntrl',function($scope,$sce){

  var text1=$sce.trustAsHtml("<md-input-container class='md-block' flex-gt-sm><label>To Location</label>"+
    "<input required name='name' ng-model='user.name'></md-input-container>");
   $scope.text1=text1;

})

</script>

【问题讨论】：

标签： html angularjs angularjs-material

【解决方案1】：

这是有效的。

<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.12/angular-material.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-sanitize.js"></script>

<script>
angular.module('myApp', ['ngMaterial', 'ngMessages', 'ngSanitize'
])
.controller('myCntrl',function($scope,$sce){

  var text1=$sce.trustAsHtml("<md-input-container class='md-block' flex-gt-sm><label>To Location</label>"+
    "<input required name='name' ng-model='user.name'></md-input-container>");
   $scope.text1=text1;

}).directive('bindHtmlCompile', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function () {
                    return scope.$eval(attrs.bindHtmlCompile);
                }, function (value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                });
            }
        };
    }]);

</script>
<body>
<div ng-app="myApp" ng-controller="myCntrl">
   <div bind-html-compile="text1"></div>
   </div>
</body>
</html>

【讨论】：

我能够得到输入，但它不是有角度的材料。我已经在 firefox 和 chromium 中检查过了
@PavanSista 你应该使用角度材质的 css 文件。我已经为材料添加了 css 文件。
我请求你在stackoverflow中执行sn-p。我已经添加了css文件。我得到了输入，但它不是 angularjs 材料。
@PavanSista 请立即查看。我添加了 bindHtmlCompile 指令。
谢谢。你能解释一下我做了什么吗？

【解决方案2】：

您可以像这种方式从控制器绑定 html，但是您从控制器 (ng-model='user.name') 绑定您的 model，这是不正确的方式

控制器

angular.module('myApp', ['ngMaterial', 'ngMessages', 'ngSanitize', 'ngAria'
])
.controller('myCntrl',function($scope,$sce){

  var text1="<md-input-container class='md-block' flex-gt-sm><label>To Location</label>"+
    "<input required name='name' ng-model='user.name'></md-input-container>";
   $scope.text1=text1;

})

查看

<div ng-app="myApp" ng-controller="myCntrl">
   <div ng-bind-html="trustAsHtml(text1)"></div>
</div>

【讨论】：

【解决方案3】：

我找到了一个没有指令的更简单的解决方案。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.12/angular-material.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-sanitize.js"></script>

<script>
angular.module('myApp', ['ngMaterial', 'ngMessages', 'ngSanitize'
])
.controller('myCntrl',function($scope,$sce,$compile){
    var mc=this;
    mc.addInput=function(){
        var html="<md-input-container class='md-block' flex-gt-sm><label>To Loon</label>"+
    "<input required name='name' ></md-input-container>";
 angular.element(document.getElementById('value')).append($compile(html)($scope));
    }
     });
</script>
<body>
<div ng-app="myApp" ng-controller="myCntrl as mc">
    <button ng-click="mc.addInput()">ClickHere</button>
   <div id="value" ></div>
   </div>
</body>

【讨论】：