The beast's angular Api learning, translating and understanding-$sce and $sceDelegate

ng API Learning for Beasts--$sce and $sceDelegate

$sce

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

Strict context escaping service (translation level is limited, more slag ...) ）

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 contextual contexts as privileged or SCE.

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

var ngbindhtmldirective = [' $sce ', function ($SCE) {

return function (scope, element, attr) {

Scope. $watch ($sce. parseashtml (attr.ngbindhtml), function (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.

General use Method:

<div ng-app= "Demo" >

<div ng-controller= "Democtrl" >

<textarea ng-model= "Jscontext" ></textarea>

<pre ng-bind= "Jsbody" ></pre>

<button ng-click= "Runjs ()" >Run</button>

<div ng-bind-html= "HTMLText" class= "Mycss" ></div>

</div>

</div>

<script>

Angular.module (' Demo ', [])

. Controller ("Democtrl", ["$scope", "$sce", Function ($scope, $SCE) {

$scope. $watch ("Jscontext", function (n) {

$scope. jsbody = n;

});

$scope. Runjs = function () {

Eval ($scope. jsbody.tostring ());

};

$scope. HTMLText = "

$scope. HTMLText = $sce. trustashtml ($scope. HTMLText);

}])

</script>

Put in filter using:

<div ng-app= "Demo" >

<div ng-controller= "Democtrl" >

<div ng-bind-html= "HTMLText | Trust: ' HTML ' ></div>

</div>

</div>

<script>

Angular.module (' Demo ', [])

. Filter ("Trust", ["$sce", function ($SCE) {

return function (Value,type) {

Console.log (Value,type)

Return $SCE. Trustas (Type,value);

}

}])

. Controller ("Democtrl", ["$scope", function ($scope) {

$scope. HTMLText = "

}])

</script>

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 3 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 that is used in angular as the specified value in the context of the use of a strictly contextual escape service.

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 to the code that runs successfully after the two-string test ....

The beast's angular Api learning, translating and understanding-$sce and $sceDelegate