Dynamically bound HTML

In web front-end development, we often meet the need to dynamically bind some HTML strings from the backend or the dynamic stitching to the page Dom display, especially in the Content management system (CMS: The abbreviation for the contents Management system), such a requirement, It is everywhere.

For the reader of angular certainly first think of ngbindhtml, yes, angular provides us with this instruction to dynamically bind HTML, which binds the computed expression result innerHTML to the DOM. But the problem is not so simple. In Web Security, XSS (cross-site scripting, Script injection attack) is a typical computer security vulnerability in a Web application. XSS attack refers to the implementation of the client code by injecting the Web page and successfully executed by the browser, to achieve the purpose of the attack, the formation of an effective XSS attack, once the attack succeeds, it may acquire some sensitive information to the user, change the user's experience, induce users and other illegal acts, Sometimes XSS attacks also meet other attack methods such as SQL injection attack server and database, click Hijacking, Relative link hijacking and other implementation of fishing, it brings the harm is huge, but also the biggest enemy of web security. For more web security issues, refer to the wiki https://en.wikipedia.org/wiki/Cross-site_scripting%E3%80%82

In angular, the default is not to trust the added HTML content, for the added HTML content, you must first take advantage of $sce.trustashtml, tell angular this is a trusted HTML content. Otherwise you will get $sce:unsafe's exception error.

Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

Here is a demo with a simple angular link:

Html:

<ng-controller= "Democtrl as demo">    <   ng-bind-html= "demo.html"></div></  div>

Javascript:

Angular.module ("Com.ngbook.demo", [])    . Controller (function($SCE) {        var  this;         var html = ' <p>hello <a href= ' https://angular.io/' >angular</a></p> ';         = $sce. trustashtml (HTML);         return vm;    }]);

For simple static HTML, this problem is solved. But for complex HTML, the complexity here refers to HTML templates with angular expressions and directives, for which we want not only to bind large DOM displays, but also to get angular's powerful two-way binding mechanism. Ngbindhhtml does not associate with $scope, and if there are ngshow instructions in HTML such as Ngclick, Nghref, nghide, angular, they will not be compile, click on these buttons, and no response will occur. The bound expression is not updated. For example, try to change the last link to: ng-href= "Demo.link", the link will not be parsed, and the DOM will still see the HTML string as it is.

All instructions in angular need to go through compile, including Pre-Link and Post-link in compile, to connect to specific behaviors to work. In most cases, the compile is automatically compile when the angular is started. However, if you are adding a template dynamically, you need a manual compile. Angular provides us with a $compile service to achieve this function. Here is a more general example of compile:

Html:

<BodyNg-controller= "Democtrl as demo">    <Dy-compileHTML= "{{demo.html}}">    </Dy-compile>    <ButtonNg-click= "Demo.change ();">Change</Button></Body>

Javascript:

Angular.module ("Com.ngbook.demo", []). Directive ("Dycompile", ["$compile",function($compile) {return{replace:true, restrict:' EA ', Link:function(Scope, elm, iattrs) {varDummy_scope ={$destroy: Angular.noop}, Root=Elm, Childscope, Destroychildscope=function() {(Childscope||dummy_scope). $destroy ();                }; Iattrs. $observe ("HTML",function(HTML) {if(HTML) {destroychildscope (); Childscope= scope.$New(false); varContent =$compile (HTML) (Childscope);                        Root.replacewith (content); Root=content; } scope. $on ("$destroy", Destroychildscope);            });    }        }; }]). Controller ("Democtrl", [function() {        varVM = This; Vm.html= ' ; Vm.link= ' https://angular.io/'; vari = 0; Vm.change=function() {vm.html= ' ;    }; }]);

This creates a command called Dy-compile, which first listens to changes in the HTML value of the bound property, and when the HTML content is present, it tries to create a sub scope first, then uses the $compile service to dynamically connect the incoming HTML and replace the current DOM node The reason for creating a sub scope here is to make it easy to destroy the scope each time the DOM is destroyed, remove the Watchers function brought by the HTML compile, and attempt to destroy the scope when the last parent scope is destroyed.

Because of the compilation and connection of the upper compile, the NGHREF directive can take effect. Just try to give an example of the dynamic compile angular module, the specific implementation, please refer to your business to declare a specific directive.

Demo: Workspace

Broken Wolf
Source: http://www.cnblogs.com/whitewolf/p/angular-dynamic-bind-html-to-dom.html

Dynamically bound HTML