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

它将解决消毒剂错误。也不要忘记将它注入直接。

具有动态内容的角度模态，具有自定义指令

1 个答案: