指令未在 AngularJS 上加载 HTML 字符串作为实际 HTML

Question

我是 angularjs 的新手，使用如下指令。当此指令加载到 HTML 文件时，它应该将这些 HTML 视为实际的 HTML 而不是字符串，但它不起作用。我正在使用 angular 1.4.7 版本。

请帮忙！！我在下面添加 HTML 作为字符串，因为我从服务中动态获取 HTML 作为字符串。所以这只是我在这里添加的例子，看看我们如何在 angularjs html 上显示 html 值，如果它作为字符串出现的话。

angular.module('my.directive', [])
    .directive("myDirective", function(){
        return {
            restrict: "EA",
            scope: false,
            template: "<div class='con'>"+
            "<div>'<p><i><strong>some text</strong></i></p>'</div>"+
            "</div>"
        };
    });

我在这里尝试了多种方法来修复它，但没有成功。我试过使用 "ng-bind-html-unsafe" 和 "ng-bind-html"，但其中 none 可以正常工作。

我什至尝试过将直接 HTML 与 ng-bind-html 一起使用，但也不安全，但也不走运。

我只是尝试了以下 HTML，但效果不佳。

<div ng-repeat="list in lists">
    <div class="content">
        <div ng-bind-html='<p><i><strong>some text</strong></i></p>'></div>
    </div>
</div>

以下也无效。

<div ng-repeat="list in lists">
    <div class="content">
        <div ng-bind-html-unsafe='<p><i><strong>some text</strong></i></p>'></div>
    </div>
</div>

Answer 1

我对你的代码做了一些修改。

template: "<div class='con'>" +
                "<div><p><i><strong>some text</strong></i></p></div>" +
                "</div>"

AnuglarJS - Directives

The restrict option is typically set to:

'A' - only matches attribute name

'E' - only matches element name

'C' - only matches class name

在你的指令中，你有这个限制：restrict: "EA"，那么你可以用作元素：

<my-directive></my-directive>.

(function() {
  angular.module('my.directive', [])
    .directive("myDirective", function() {
      return {
        restrict: "EA",
        scope: false,
        template: "<div class='con'>" +
          "<div><p><i><strong>some text</strong></i></p></div>" +
          "</div>"
      };
    })
    .controller("Controller", ["$scope",
      function($scope) {
        $scope.title = "my-directive";
        $scope.lists = [{
          "id": 1,
          "text": "1"
        }, {
          "id": 2,
          "text": "2"
        }];
      }
    ]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="my.directive">
  <div data-ng-controller="Controller">
    <h1 data-ng-bind="title"></h1>

    <div data-ng-repeat="list in lists">
      <div class="content">{{list.id}}
        <my-directive></my-directive>
      </div>
    </div>
  </div>
</div>

更新： 使用ngSanitize：

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

在您当前的标记中，您需要添加双引号 "。

<div data-ng-bind-html="'<p><i><strong>some text</strong></i></p>'"></div>

并在您的模块中添加 ngSanitize 依赖项。

像这样：

(function() {
  angular.module("my.directive", ["ngSanitize"])
    .controller("Controller", ["$scope",
      function($scope) {
        $scope.title = "my-directive";
        $scope.lists = [{
          "id": 1,
          "text": "1"
        }, {
          "id": 2,
          "text": "2"
        }];
      }
    ]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script>
<div data-ng-app="my.directive">
  <div data-ng-controller="Controller">
    <h1 data-ng-bind="title"></h1>

    <div ng-repeat="list in lists">
      <div class="content">
        <div data-ng-bind-html="'<p><i><strong>some text</strong></i></p>'"></div>
      </div>
    </div>
  </div>
</div>

指令未在 AngularJS 上加载 HTML 字符串作为实际 HTML

Directive not loading HTML string as actual HTML on AngularJS

javascript

html

angularjs

angularjs-directive

ng-bind-html