Angular--$sce and $sceDelegate

Source: Internet
Author: User

$sce

$SCE Service is a strict context escaping service provided by ANGULARJS.

Strict context-escaping service

Strict context escaping (SCE) is a pattern that requires a context in which Angularjs bound values are marked as safe to use. An example of this is the binding of arbitrary HTML statements by the user through ng-bind-html. We call these contexts escaped as privileged or SCE.

The following code is a simplified ngbindhtml implementation (of course, this is not the full version of ngbindhtml source):

  function($sce) {      functionfunction(value) {element.html (value | | "); }); }; }];

Which trust context types are supported?

$sce. HTML binds the HTML code securely to the application.

$sce. CSS binds CSS style code securely to the application.

$sce. The URL securely binds the URL to the application and guarantees it is available. For example (HREF,SRC)

$sce. Resource_url binds the resource_url securely to the application and guarantees it is available. For example (NG-HREF,NG-SRC)

$sce. JS securely binds JavaScript code to the application.

How can I make the $SCE service available or unavailable?

  Angular.module ("myApp", []). config (["$sceProvider",function($sceProvider) {       $sceProvider. Enabled ( true/false);  }]);  

Use : $sce ();

Method :

IsEnabled ();

Returns a Boolean that indicates whether SCE can be enabled.

Parseas (type,expression);

Converts a angular expression to a function. This is similar to $parse parsing and is the same when an expression is constant. Otherwise, it will call $sce.gettrusted (Type,result) to wrap the expression.

Type: The types of results used in the context of the SCE.

Expression: The string expression that was compiled.

Trustas (Type,value);

Represents $scedelegate.trustas.

Type: Values that can be used safely in context, such as Url,resourceurl,html,js and CSS.

Value: You need to be considered a safe or a value of trust.

trustashtml (value);

$sceDelegate. Trustas ($sce. Html,value) shortcut.

Value: The values that are trusted.

Trustasurl (value);

$sceDelegate. Trustas ($sce. Url,value) shortcut.

Value: The values that are trusted.

Trustasresourceurl (value);

$sceDelegate. Trustas ($sce. Resource_url,value) shortcut.

Value: The values that are trusted.

Trustasjs (value);

$sceDelegate. Trustas ($sce. Js,value) shortcut.

Value: The values that are trusted.

Gettrusted (type,maybetrusted);

Represents $scedelegate.gettrusted. Therefore, the results of $SCE are obtained. If the context type of the query is a creative type, call Trustas () and return the value originally provided. If this condition is not met, an exception is thrown.

gettrustedhtml (value);

$sceDelegate. gettrusted ($sce. Html,value) shortcut.

Value: Values after execution by $sce.gettrusted.

Gettrustedcss (value);

$sceDelegate. gettrusted ($sce. Css,value) shortcut.

Value: Values after execution by $sce.gettrusted.

Gettrustedurl (value);

$sceDelegate. gettrusted ($sce. Url,value) shortcut.

Value: Values after execution by $sce.gettrusted.

Gettrustedresourceurl (value);

$sceDelegate. gettrusted ($sce. Resource_url,value) shortcut.

Value: Values after execution by $sce.gettrusted.

Gettrustedjs (value);

$sceDelegate. gettrusted ($sce. Js,value) shortcut.

Value: Values after execution by $sce.gettrusted.

parseashtml (expression);

$sce. Parseas ($sce. Html,value) shortcut.

Value: The string expression that was compiled.

PARSEASCSS (expression);

$sce. Parseas ($sce. Css,value) shortcut.

Value: The string expression that was compiled.

Parseasurl (expression);

$sce. Parseas ($sce. Url,value) shortcut.

Value: The string expression that was compiled.

Parseasresourceurl (expression);

$sce. Parseas ($sce. Resource_url,value) shortcut.

Value: The string expression that was compiled.

PARSEASJS (expression);

$sce. Parseas ($sce. Js,value) shortcut.

Value: The string expression that was compiled.

How to use:

  <DivNg-app= "Demo"Ng-controller= "Testctrl as CTRL"><TextAreaNg-model= "Ctrl.jscontext"></TextArea><PreNg-bind= "Ctrl.jsbody"></pre> <button ng-click= "Ctrl.runjs ()" >run</button< Span style= "color: #0000ff;" >> <div = "Ctrl.htmltext"  Class= "Mycss" ></div > </div>                 
 (function,testctrl]); function Testctrl ($sce, $scope) {var vm = thisfunction (n) {vm.jsbody = n;}); vm.runjs = function () {eval (vm.jsBody.toString ());}; vm.htmltext ="  Vm.htmltext = $sce. trustashtml (Vm.htmltext);}} ()); 

Put in filter using:

  <Ng-app= "Demo" ng-controller= "Testctrl as Ctrl"<ng-bind-html= " Ctrl.htmltext | Trust: ' HTML ' "></div</div>        
 (function

Above is an HTML code string that will not be recognized as trusted by angular through the $SCE set to the trusted HTML code and insert the example, here is a small trick, it is not in the controller to do this step, directly into a filter service, As long as you filter it where you want it, and you can specify a type, it's written as a unified dynamic selection type. So when do you need these two services, the answer is when you bind the ng-bind-html times wrong: error: [$SCE: Unsafe]attempting to uses an unsafe value in a safe context. The time. haha ~ ~ ~

$sceDelegate

$sceDelegate is a service that ANGULARJS provides strict context-escaping services for $SCE services.

Typically, you will configure or rewrite $scedelegate to replace the $SCE service to customize the strict context-escaping mechanism in ANGULARJS. When $sce offers a multitude of shortcuts, you actually only need to rewrite the three core features (trustas,gettrusted and valueof) to override the way events work, because $SCE represents these actions for $scedelegate.

When you have finished rewriting or configuring $scedelegate to change the behavior of $SCE, you typically need to configure $scedelegateprovider in place of the whitelist and blacklist that you use to load trusted ANGULARJS resources such as template.

Use : $sceDelegate ();

Method :

Trustas (Type,value);

Returns an object in angular that is used as the specified value in the context of the service context for the use of strict contexts.

Type: Values that can be used safely in context, such as Url,resourceurl,html,js and CSS.

Value: You need to be considered a safe or a value of trust.

ValueOf (value);

If the passed parameter is returned by a previous $scedelegate.trustas call, returns the value passed $scedelegate.trustas. Otherwise, the original value is returned.

Value: The result of the previous $scedelegate.trustas call or any other result.

Gettrusted (type,maybetrusted);

If the context type of the query is a creative type, get the result of the $scedelegate call and return the value originally provided. If this condition is not satisfactory, throw an exception.

Type: Types of values that need to be used.

Value: The result of the previous $scedelegate.trustas call or any other result.

Use code (configure Whitelist/blacklist):

  Angular.module (' myApp ', []). config (["$ scedelegateprovider",function($sceDelegateProvider) {    $ Scedelegateprovider.resourceurlwhitelist (["Whitelist value"]);    $sceDelegateProvider. Resourceurlblacklist (["Blacklist value"]);  }]); 

After writing to sleep--. -This preparation for two days, in Google to find some more detailed information on the following, and then write a general Chinese, and then write the demo, but feel this related article more is more, write the copy of the source code, note 2-3 sentence is almost, not as practical to a demo, So throw it straight up. Two serial test after the successful code ...

Angular--$sce and $sceDelegate

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.