Использование ng-bind-html и $ sce.trustAsHtml создает строку с привязкой ng-модели

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