Угловая мода с динамическим контентом с пользовательскими директивами

Question

Я пытаюсь отобразить динамическую форму, которая содержит настраиваемые директивы как модальные. Я попытался использовать ng-bind-html, но содержимое html, которое имеет настраиваемую директиву, появляется пустым и генерирует ошибку «Дезинфицирующее средство не смогло разобрать следующий блок html:»

Пробег demo. Пожалуйста, порекомендуйте.

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ngSanitize']); 
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) { 

    $scope.textvalue = ""; 
    $scope.cbvalue = ""; 

}); 

// Please note that $modalInstance represents a modal window (instance) dependency. 
// It is not the same as the $modal service used above. 

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) { 

    $scope.items = items; 

    $scope.textvalue; 
    $scope.ddvalue; 

    $scope.selected = { 
    item: $scope.items[0] 
    }; 

    $scope.ok = function() { 
    $modalInstance.close($scope.selected.item); 
    }; 

    $scope.cancel = function() { 
    $modalInstance.dismiss('cancel'); 
    }; 
}); 
angular.module('ui.bootstrap.demo').directive('customTextinput', function(){ 
    return { 
    restrict: "EA", 
    scope: { 
     label: "=", 
     fieldvalue: "=" 
    }, 
    templateUrl: "customti.html", 
    controller: function($scope, $log){ 

    } 
    } 
}) 
angular.module('ui.bootstrap.demo').directive('customDropdown', function(){ 
    return { 
     restrict: "EA", 
     scope: { 
     label: "=" 
     }, 
     templateUrl: "customcb.html", 
     controller: function($scope, $modal, $sce){ 
     $scope.showModal = function(){ 
      var modalInstance = $modal.open({ 
      animation:true, 
      templateUrl: 'modaldemo.html', 
      backdrop: 'static', 
      controller: function($scope, $log, $modalInstance){ 
       $scope.myContent = '<custom-textinput label="\'Text Input\'" ng-model="textvalue"'; 
       //$scope.myContent = "<p>Hello World</p>"; 
       $scope.ok = function() { 
        $modalInstance.close(''); 
       } 
       $scope.cancel = function() { 
        $modalInstance.dismiss('cancel'); 
       } 
      } 
      }) 
     } 
     } 
    } 
}) 

Answer 1

Вам нужно модуль под названием ngSanitize взглянуть на угловые документы здесь

https://docs.angularjs.org/api/ngSanitize

После установки этого Вы можете использовать $ ScE услугу, как этот

var cleanHtml = $sce.trustAsHtml(html); 

Это будет решать дезинфицирующие ошибки. Также не забудьте ввести его в директиву.