The example in this article describes the method of Angularjs dynamically bound HTML. Share to everyone for your reference, specific as follows:
In Web front-end development, we often encounter the need to dynamically bind some HTML strings from back-end or dynamic concatenation to the page Dom display, especially in the Content management system (CMS: The abbreviation of Content Management systems), and this requirement It is everywhere.
For readers of angular, it is certain that ngbindhtml is the first to be thought of, yes, angular provides us with this instruction to dynamically bind HTML, which binds the computed expression results to the DOM innerHTML. But the problem is not so simple. XSS (cross-site scripting, Script injection attack) in web security is a typical computer security vulnerability in Web applications. XSS attack refers to the use of the Web page to inject executable client code and successfully executed by the browser to achieve the purpose of the attack, the formation of an effective XSS attack, once the attack is successful, it may acquire some of the user's sensitive information, change the user's experience, inducing users and other illegal acts, Sometimes XSS attacks also converge on other attacks simultaneously implement such as SQL injection attack server and database, click Hijacking, Relative link hijacking and other implementation of fishing, it brings the harm is huge, is also the biggest enemy of web security. For more web security issues, please refer to the wiki https://en.wikipedia.org/wiki/Cross-site_scripting%E3%80%82
In angular, the default is not to believe that the added HTML content, for added HTML content, first must take advantage of $sce.trustashtml, tell angular this is trusted HTML content. Otherwise you will get a $sce:unsafe error.
Error: [$SCE: unsafe] Attempting to the unsafe value in a safe context.
Here is a demo that binds to a simple angular link:
Html:
<div ng-controller= "Democtrl as Demo" > <div ng-bind-html= "demo.html" ></div> </div>
Javascript:
Angular.module ("Com.ngbook.demo", [])
. Controller ("Democtrl", ["$sce", function ($SCE) {
var vm = this;
var html = ' <p>hello <a href= ' https://angular.io/' >angular</a></p> ';
vm.html = $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, instructions, and for them, we want to not only bind the large DOM display, but also want to get angular powerful two-way binding mechanism. Ngbindhhtml does not bind to $scope, and if there are ngshow directives in HTML such as Ngclick, Nghref, nghide, angular, and so on, they are not compile, and clicking on them will not happen. The bound expression is also not updated. For example, trying to change the last link to: ng-href= "Demo.link", the link will not be parsed, and the DOM will still see the original HTML string.
All instructions in angular need to go through compile, include Pre-Link and Post-link in compile, and connect to specific behavior to work. In most cases, the compile is automatically compile when the angular is started. However, if you are adding a dynamically added template, 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:
<body ng-controller= "Democtrl as Demo" >
<dy-compile html= "{{demo.html}}" >
</dy-compile>
<button ng-click= "Demo.change ();" >change</button>
</body>
Javascript:
Angular.module ("Com.ngbook.demo", []). Directive ("Dycompile", ["$compile", function ($compile) {return {REPL Ace:true, restrict: ' EA ', link:function (scope, elm, iattrs) {var dummy_scope = {$destr
Oy:angular.noop}, root = Elm, childscope, destroychildscope = function () { (Childscope | |
Dummy_scope). $destroy ();
};
Iattrs. $observe ("HTML", function (HTML) {if (HTML) {destroychildscope ();
Childscope = scope. $new (FALSE);
var content = $compile (HTML) (Childscope);
Root.replacewith (content);
root = content;
Scope. $on ("$destroy", Destroychildscope);
});
}
};
}]. controller ("Democtrl", [function () {var vm = this;
vm.html = '
This creates a command called Dy-compile that first listens to changes to the HTML value of the binding attribute, and when the HTML content exists, it tries to create a child scope first, then uses the $compile service to dynamically connect the incoming HTML and replace the current DOM node The reason for creating a child scope is that it is easy to destroy the scope every 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 top compile, the nghref instruction can take effect. Here just try to give examples of dynamic compile angular modules, the specific implementation, please refer to your business to declare specific directive.
I hope this article will help you to Angularjs program design.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
