AngularJS基础 ng-csp 指令详解
AngularJS ng-csp 指令
AngularJS 实例
修改 AngularJS 中关于 "eval" 的行为方式及内联样式:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="" ng-csp> <div> <p>我的第一个表达式: {{ 5 + 5 }}</p> </div> <p>使用 ng-csp 指令, 你可以修改 AngularJS 执行代码的方式。</p> <p>AngularJS 的执行方式提高了 30% 的性能</p> </body> </html>
运行结果:
我的第一个表达式:10
使用 ng-csp 指令, 你可以修改 AngularJS 执行代码的方式。
AngularJS 的执行方式提高了 30% 的性能
定义和用法
ng-csp 指令用于修改 AngularJS 的安全策略。
如果使用了 ng-csp 指令, AngularJS 将不会执行eval 函数,这样就无法注入内联样式。
设置 ng-csp 指令为 no-unsafe-eval, 将阻止 AngularJS 执行 eval 函数,但允许注入内联样式。
设置 ng-csp 指令为 no-inline-style, 将阻止 AngularJS 注入内联样式,但允许 执行 eval 函数。
如果开发 Google Chrome 扩展或 Windows 应用 ng-csp 指令是必须的。
注意:ng-csp 指令不会影响 JavaScript,但会修改 AngularJS 的工作方式,这就意味着: 你仍然可以编写 eval 函数, 且也可以正常
执行, 但是 AngularJS 不能执行它自己的 eval 函数。如果采用兼容模式,会降低 30% 的性能。
语法
<element ng-csp="no-unsafe-eval | no-inline-style"></element>
参数值
值 | 描述 |
---|---|
no-unsafe-eval no-inline-style |
值可设置为空,意味着 eval 和 内联样式都不被允许。 可以设置其中一个值。 你也可以同时设置两个值使用分号隔开,但这与留空的效果是一样的。 |
以上就是对AngularJS ng-csp 指令资料的整理,学习AngularJS的朋友参考下。
相关推荐
-
AngularJS基础 ng-dblclick 指令用法
AngularJS ng-dblclick 指令 AngularJS 实例 在每次鼠标双击时,变量 count 加 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> &l
-
AngularJS基础 ng-disabled 指令详解及简单示例
AngularJS ng-disabled 指令 AngularJS 实例 禁用或启用输入框: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> &
-
AngularJS基础 ng-hide 指令用法及示例代码
AngularJS ng-hide 指令 AngularJS 实例 在复选框选中时隐藏一部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> &
-
AngularJS基础 ng-keypress 指令简单示例
AngularJS ng-keypress 指令 AngularJS 实例 按下按键时执行的代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>
-
Angularjs 自定义服务的三种方式(推荐)
AngularJS简介: AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). AngularJS 学习起来非常简单. angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$provide var starterApp = angular.module('
-
AngularJS基础 ng-copy 指令实例代码
AngularJS ng-copy 指令 AngularJS 实例 在输入框的文本被拷贝时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head&g
-
AngularJs页面筛选标签小功能
AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:
-
Vue 2.0入门基础知识之内部指令详解
1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即"一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-
-
vue快捷键与基础指令详解
v-bind可以简写成 : <img src="{{url}}">→<img :src="url" :width="50px"> v-on:click可以写成@click <button @click="up()"></button> v-if实例 可以通过对对象操作条件来实现想要展示的效果 <!DOCTYPE html> <html> <he
-
AngularJs表单验证实例详解
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <input type="text" ng-minlength="
-
Angular17之Angular自定义指令详解
1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲染这些DOM节点来呈现内容,用户在浏览器中看到的内容就是浏览器渲染DOM对象后的结果. 2 指令的分类 组件.属性指令.结构性指令 3 指定义指令常用到的一些常量 3.1 Directive 用于装饰控制器类来指明该控制器类是一个自定义指令控制器类 3.2 ElementRef 作为DOM对象的引用
-
基于angular中的重要指令详解($eval,$parse和$compile)
在angular的服务中,有一些服务你不得不去了解,因为他可以说是ng的核心,而今天,我要介绍的就是ng的两个核心服务,$parse和$compile.其实这两个服务讲的人已经很多了,但是100个读者就有100个哈姆雷特,我在这里讲讲自己对于他们两个服务的理解. 大家可能会疑问,$eval呢,其实他并不是一个服务,他是scope里面的一个方法,并不能算服务,而且它也基于parse的,所以只能算是$parse的另一种写法而已,我们看一下ng源码中$eval的定义是怎样的就知道了 $eval: fu
-
iOS逆向工程之Hopper中的ARM指令详解
虽然前段时间ARM被日本软银收购了,但是科技是无国界的,所以呢ARM相关知识该学的学.现在看ARM指令集还是倍感亲切的,毕竟大学里开了ARM这门课,并且做了不少的实验,当时自我感觉ARM这门课学的还是可以的.虽然当时感觉学这门课以后似乎不怎么用的上,可曾想这不就用上了吗,不过之前学的都差不多忘了,还得捡起来呢.ARM指令集是精简指令集,从名字我们就能看出指令的个数比那些负责指令集要少一些.当然本篇所涉及的ARM指令集是冰山一角,不过也算是基础,可以阅读Hopper中的汇编了,实践出真知,看多了自
-
vue内置指令详解
指令 (Directives) 是带有 v- 前缀的特殊属性, 职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title 等等 主要用法是绑定属性,动态更新HTML元素上的属性: <a v-bind:href="url" rel="external nofollow" rel="external n
-
AngularJS的$location使用方法详解
AngularJS的$location使用方法详解 一.配置config app.config([ '$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ //设置为html5Mode(模式),当为false时为Hashbang模式 enabled : true, //是否需要加入base标签,这里设置为false,设置为true时,需在html的head配置<base href="&
-
Angularjs中数据绑定的实例详解
Angularjs中数据绑定的实例详解 这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果 <html ng-app> <head> <title>angularjs-include</title> <script type="text/javascript" src="js/angular/angular.min.js"></script> </head
-
AngularJS的Filter的示例详解
贴上几个有关Filter使用的几个示例. 1. 首先创建一个表格 <body ng-app="app"> <div class="divAll" ng-controller="tableFilter"> <input type="text" placeholder="输入你要搜索的内容" ng-model="key"> <br><br
随机推荐
- java单例模式实现面板切换
- Android中backgroundDimEnabled的作用
- 跟老齐学Python之关于循环的小伎俩
- Java中使用JavaMail多发邮件及邮件的验证和附件实现
- 详解ABP框架中的数据过滤器与数据传输对象的使用
- 老生常谈javascript中逻辑运算符&&和||的返回值问题
- php使用pear_smtp发送邮件
- php中unlink()、mkdir()、rmdir()等方法的使用介绍
- 领悟php接口中interface存在的意义
- Python HTMLParser模块解析html获取url实例
- 数据库安装包和升级包脚本工具RedGate使用介绍
- win10安装Sql Server 2014图文教程
- SQL 经典语句
- jQuery模拟下拉框选择对应菜单的内容
- JS实现仿中关村论坛评分后弹出提示效果的方法
- 使用yum查看工具lspci所在包并安装的方法(详解)
- php实现XSS安全过滤的方法
- php判断类是否存在函数class_exists用法分析
- php中的登陆login实例代码
- Directory文件类的实例讲解