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