代码之家  ›  专栏  ›  技术社区  ›  Pavan Sista

Angularjs标记不能使用ng bind html

  •  0
  • Pavan Sista  · 技术社区  · 7 年前

    输入仅显示为平面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>
    
    1 回复  |  直到 7 年前
        1
  •  2
  •   Mano    7 年前

    这很管用。

    <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>
        2
  •  0
  •   Mayank Vadiya Chintan Hingrajiya    7 年前

    您可以像这样从控制器绑定html,但是您正在绑定 model 来自控制器( ng-model='user.name' )那不是正确的方式

    控制器

    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
  •  0
  •   Pavan Sista    7 年前

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

    <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>
    
    推荐文章