如何從ngModel呈現HTML標記？

我正在使用AngularJS將JS變量綁定到我的HTML內容，並且它工作正常。如何從ngModel呈現HTML標記？

var app = angular.module("Tabs", []) 
    .controller("TabsController", ['$scope', function($scope){ 
    $scope.events = my_JS_object; 
    })

HTML

<div>{{events.test}}</div>

它的工作原理，只要my_JS_object.test是一個簡單的字符串，如"Hello World"，但一旦我嘗試把HTML標籤在那裏，這樣的as Hello <b>World</b>它不使用標籤作爲HTML元素，而是作爲簡單的文本。這是有道理的，只有我不知道如何使HTML標籤的工作。

來源

2015-10-15 Reuven

正如角文檔說明，您可以使用內置的NG綁定，HTML指令評估模型串並插入生成的HTML成元素。

例如：如果你有借鑑價值，如：

$scope.myHTML = 
'I am an <code>HTML</code>string with ' + 
'<a href="#">links!</a> and other <em>stuff</em>';

使用NG綁定，HTML，如：

<p ng-bind-html="myHTML"></p>

有關詳細信息，請通過：https://docs.angularjs.org/api/ng/directive/ngBindHtml

注意：不要忘記注入ngSanitize服務在您的應用程序。

來源

2015-10-15 12:39:22

您需要使用ngBindHtml指令，該指令可正確評估表達式並以安全方式將生成的HTML插入到元素中。爲此，您必須在HTML中引用angular-sanitize.js，然後在角度模塊中插入ngSanitize。

像這樣

var app = angular.module("Tabs", ['ngSanitize']) 
    .controller("TabsController", ['$scope', function($scope){ 
     $scope.events = my_JS_object; 
    }) 

<div ng-controller="TabsController"> 
    <div ng-bind-html="events.test"></div> 
</div>

這是一個完整的工作示例：

(function(angular) { 
 
    'use strict'; 
 
angular.module('bindHtmlExample', ['ngSanitize']) 
 
    .controller('ExampleController', ['$scope', function($scope) { 
 
    $scope.myHTML = 'Hello This is <b>BOLD<b/>'; 
 
    }]); 
 
})(window.angular);

<head> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-sanitize.js"></script> 
 
</head> 
 
<body ng-app="bindHtmlExample"> 
 
    <div ng-controller="ExampleController"> 
 
    <p ng-bind-html="myHTML"></p> 
 
    </div> 
 
</body>

參考官方的角度文檔細節： https://docs.angularjs.org/api/ng/directive/ngBindHtml

來源

2015-10-15 12:37:08 Dayan

如果你想插入HTML頁面，你不應該這樣做。此任務有sanitize。例如，在你的控制器：

$scope.trustedHtml = "<b>Hello World</b>"

而在你的HTML：

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

如果使用的是用戶給定文本插入之前，務必檢查HTML。

另外不要忘記添加ngSanitize的依賴，同時創造控制器

來源

2015-10-15 12:37:21

如果要將自定義HTML嵌入到DOM樹中，則更容易使用跨接。

angular.module('myApp', []) 
 
.controller('MainCtrl', function ($scope) { 
 
    $scope.overwrite = false; 
 
    $scope.origin = 'parent controller'; 
 
}) 
 
.directive('myDirective', function() { 
 
    return { 
 
     restrict: 'E', 
 
     templateUrl: 'my-directive.html', 
 
     scope: {}, 
 
     transclude: true, 
 
     link: function (scope) { 
 
      scope.overwrite = !!scope.origin; 
 
      scope.origin = 'link function'; 
 
     } 
 
    }; 
 
});

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="MainCtrl"> 
 
     <my-directive> 
 
      <p>HTML template</p> 
 
      <p>Scope from {{origin}}</p> 
 
      <p>Overwritten? {{overwrite}}</p> 
 
     </my-directive> 
 
    </div> 
 
    
 
<script type="text/ng-template" id="my-directive.html"> 
 
    <ng-transclude></ng-transclude> 
 
    <hr /> 
 
    <p>Directive template</p> 
 
    <p>Scope from {{origin}}</p> 
 
    <p>Overwritten? {{overwrite}}</p> 
 
</script> 
 
</div>

來源

2015-10-15 13:14:43

比使用'納克綁定-html'指令更容易！？ – Dayan

爲了簡化編寫代碼，ng-bind-html更快，更易於理解。這可能只是我個人的偏好，我想要管理模板中的所有html塊而不是控制器中的所有html塊。 –

如何從ngModel呈現HTML標記？

回答

相關問題