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

0

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

Вот демоверсия. Пожалуйста, порекомендуйте.

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');
                }
            }
          })
        }
      }
    }
})
Теги:
modal-dialog

1 ответ

0

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

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

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

var cleanHtml = $sce.trustAsHtml(html);

Он будет решать проблемы дезинфекции. Также не забудьте ввести его в директиву.

  • 0
    Извините, попробовал это. Это не работает. код имеет ngsanitize.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню