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

Question

I am new to angularjs and using this directive as below. When this directive gets loaded on HTML file, it should treat these HTML as actual HTML rather than string but it is not working. I am using angular 1.4.7 version.

Please help!! I am adding below HTML as String because I am getting that HTML as String from service dynamically. So this is just example that I am adding here to see how can we display html value on angularjs html if it is coming as string.

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

I have tried multiple ways to fix it here but no luck. I have tried using "ng-bind-html-unsafe" and "ng-bind-html" but none of them works correctly.

I have even tried using direct HTML with ng-bind-html and unsafe as well but no luck there as well.

I have simply tried below HTML but that doesn't work as well.

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

Also below doesn't work.

<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

I did some modifications in your code.

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

In your directive, you have this restriction: restrict: "EA" , then you can use as element:

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

---

Update: Using ngSanitize :

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

In your current markup, you need to add double quoutes " .

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

And add the ngSanitize dependency in your module.

Something like this:

 (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>