ng-bind-htmlと$ sce.trustAsHtmlを使用すると、ng-modelバインディングで文字列を作成します

Question

動的なフォームを作成したいと思います。私のコントローラの中に私は

var str = "<input type='text' value='" + $scope.selectedData.code + "' class='form-control' />"; 
$scope.htmlString = $sce.trustAsHtml(str); 

と私のhtmlページで

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

文字列を作成し、私は値を取得しますが結合されていません。 私も一緒にお試しください

var str = "<input type='text' ng-model='" + $scope.selectedData.code + "' class='form-control' />"; 
$scope.htmlString = $sce.trustAsHtml(str); 

も動作しません。誰でもこのことができますか？

Answer 1

HTML：

ディレクティブを追加します。compile-template

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

JS：

angular.module('ngApp', ['ngSanitize']) 
.controller('controller1', ['$scope','$sce', function($scope, $sce) { 
    var str = "<input type='text' ng-model='" + $scope.selectedData.code + "' class='form-control' />"; 
    $scope.htmlString = $sce.trustAsHtml(str); 
}]) 
.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 
      }); 
     } 
    } 
});