是否可以在AngularJS控制器中创建一个HTML片段,并在视图中显示该HTML?

这是因为需要将不一致的JSON blob转换为id:value对的嵌套列表。因此,HTML是在控制器中创建的,我现在希望显示它。

我已经创建了一个模型属性,但如果不打印HTML,就无法在视图中呈现它。


使现代化

问题似乎源于将创建的HTML作为引号中的字符串进行角度渲染。将尝试找到解决方法。

控制器示例:

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';
}

示例视图:

<div ng:bind="customHtml"></div>

给予:

<div>
    "<ul><li>render me please</li></ul>"
</div>

当前回答

ng绑定html不安全不再有效。

这是最短的路:

创建筛选器:

myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

在您看来:

<div ng-bind-html="customHtml | unsafe"></div>

注:此方法不需要包含ngSanitize模块。

其他回答

Use

<div ng-bind-html="customHtml"></div>

and

angular.module('MyApp', ['ngSanitize']);

为此,您需要包含angular-cleanice.js,例如,在您的html文件中

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>

我发现使用ng消毒液不允许我在html中添加ng点击。

为了解决这个问题,我添加了一个指令。这样地:

app.directive('htmldiv', function($compile, $parse) {
return {
  restrict: 'E',
  link: function(scope, element, attr) {
    scope.$watch(attr.content, function() {
      element.html($parse(attr.content)(scope));
      $compile(element.contents())(scope);
    }, true);
  }
}
});

这是HTML:

<htmldiv content="theContent"></htmldiv>

祝你好运

这里有一个简单的(不安全的)绑定为html指令,不需要ngSanitize:

myModule.directive('bindAsHtml', function () {
    return {
        link: function (scope, element, attributes) {
            element.html(scope.$eval(attributes.bindAsHtml));
        }
    };
});

请注意,如果绑定不受信任的内容,这将导致安全问题。

使用方式如下:

<div bind-as-html="someHtmlInScope"></div>

我今天试过了,唯一找到的办法就是

<div ng bind html unsafe=“expression”></div>

对于Angular 1.x,在html中使用ng bind html:

<div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>

此时,您将尝试在安全上下文错误中使用不安全的值,因此需要使用ngSanitize或$sce来解决此问题。

$sce

在控制器中使用$scetrustAsHtml()转换html字符串。

 $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitize公司

有两个步骤:

包括angular-cleanity.min.js资源,即:<script src=“lib/aangular/aangular cleanity.min.js”></script>在js文件(controller或通常是app.js)中,包含ngSanitize,即:angular.module('myApp',['myApp.filters','myApp.services',“myApp.指令”,“ngSanitize”])