Angular - - ngApp、ngBind、ngBindHtml、ngNonBindable
对于ng-系列的指令，每篇文章写2-5个吧，不然显得文章好短....
ngApp
使用这个指令自动启动一个AngularJS应用。ngApp指令指定了应用程序的根节点，通常会将ngApp放置在网页的根节点如<body>或<html >标签的。
格式：ng-app=”value”
value：当前应用程序模块的名称。
使用代码：
<div ng-app="Demo"></div>
需要注意的是：1.3版本以前的是可以不设置值的，1.3只后就是必需的了，而且该模块还得被定义，网上很多部分的教程是1.3版本之前的，所以大家在用的时候注意下版本问题。
这个指令野兽的理解其实他就是告诉Angular，应用程序的根节点在我这，并且在1.3版本后告诉Angular你该执行的模块的名称是什么。
ngBind
ngBind告诉Angular去用指定的表达式的值去替换指定元素内的文本内容，并且当表达式的值变化时让文本内容也跟着变化。
格式：ng-bind=”value” class="ng-bind:value;"
value：表达式/值
使用代码：
<div ng-app="Demo">
<div ng-controller="testCtrl as ctrl">
<span ng-bind="ctrl.hello"></span> <span class="ng-bind:ctrl.world"></span><br />
<span ng-bind="ctrl.hi()"></span>
</div>
</div>
(function () {
angular.module("Demo", [])
.controller("testCtrl", testCtrl);
function testCtrl() {
var vm = this;
vm.hello = "Hello";
vm.world = "World";
vm.hi = function () {
return "Hi!";
};
};
}());
ngBind相对于{{}}形式绑定的好处就是当你快速刷新或者打开页面那瞬间，不会将绑定代码暴露。
这个不用过多说明，直接就能看得出这是个绑定数据的指令。
ngBindHtml
创建一个将innerHTML函数所执行的结果绑定到页面指定元素的绑定方式。
格式: ng-bind-html=”value”
value: 将会被html转义并且绑定的字符串。
配合$sce使用：
.hello { width: 300px; height: 300px; background: #ccc; color: red; }
<div ng-app="Demo">
<div ng-controller="demoCtrl as ctrl">
<div ng-bind-html="ctrl.htmlText"></div>
</div>
</div>
(function () {
angular.module("Demo", [])
.controller("testCtrl", ["$sce",testCtrl]);
function testCtrl($sce) {
var vm = this;
vm.htmlText = '<div class="hello">Hello Wrold</div>';// Error: [$sce:unsafe]Attempting to use an unsafe value in a safe context.
vm.htmlText = $sce.trustAsHtml(vm.htmlText); // ok 能正常输出html了
};
}());
引入angular-ngSanitize.js使用：
<div ng-app="Demo">
<div ng-controller="testCtrl as ctrl">
<div ng-bind-html="ctrl.htmlValue"></div>
</div>
</div>
(function () {
angular.module("Demo", ["ngSanitize"])
.controller("testCtrl", [testCtrl]);
function testCtrl() {
var vm = this;
vm.htmlText = '<div class="hello">Hello Wrold</div>';
};
}());
ngNonBindable
这个指令告诉Angular不要去对当前的Dom元素进行编译或者绑定值。当元素的内容需要展示Angular指令和绑定但是又得让Angular忽略他的执行的时候，这个指令就有用了。比如你有个网站，需要展示代码片段的时候。
格式：ng-non-bindable
使用代码：
<span ng-bind="greeting"></span>
<span ng-bind="greeting" ng-non-bindable></span>
<span ng-non-bindable >{{greeting}}</span>
写文章不是为了写出来给别人看才写的，把自己的学习过程记录下来，对学习做个总结，让自己记的更深些，以后还可以回过来看看；如果有人愿意看看的话也可以来个交流，分享分享大家不同的理解和经验..
Angular - - ngApp、ngBind、ngBindHtml、ngNonBindable的更多相关文章
- 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据
一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...
- JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- Nginx 部署、反向代理配置、负载均衡
Nginx 部署.反向代理配置.负载均衡 最近我们的angular项目部署,我们采用的的是Nginx,下面对Nginx做一个简单的介绍. 为什么选择Nginx 轻:相比于Apache,同样的web服务 ...
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...
- 微软、谷歌、亚马逊、Facebook等硅谷大厂91个开源软件盘点（附下载地址）
开源软件中有大量专家构建的代码,大大节省了开发人员的时间和成本,热衷于开源的大厂们总是能够带给我们新的惊喜.2016年9月GitHub报告显示,GitHub已经有超过 520 万的用户和超 30 万的 ...
- Google、亚马逊、微软 、阿里巴巴开源软件一览
Google.亚马逊.微软 .阿里巴巴开源软件一览 大公司为什么要发布开源项目?一是开源能够帮助他人更快地开发软件,促进世界创新,主要是社会价值层面的考虑.二是开源能够倒逼工程师写出更好的代码.三是开 ...
- Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器
一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
随机推荐
- 转：web_custom_request 函数
语法:Int web_custom_request (const char *RequestName, <List of Attributes>, [EXTRARES, <List ...
- Android - Get Bluetooth UUID for this device
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join th ...
- HDU 4638 (莫队)
题目链接:Problem - 4638 做了两天莫队和分块,留个模板吧. 当插入r的时候,设arr[r]代表r的位置的数字,判断vis[arr[r-1]]和vis[arr[r+1]]是否访问过,如果两 ...
- hdu1915
对于图的东西总是一筹莫展,没办法,还是翻出以前的基础题来看看,然后慢慢分析吧.路漫漫其修远兮,吾将上下而求索…… void bfs(int x,int y){ for(int k=0;k<8;k ...
- python之requests模块
1.安装 pip install requests 2.基本用法 就是以某种HTTP方法向远端服务器发送一个请求而已 import requests r = requests.get('https:/ ...
- Codeforces#371 Div2
这是一场非常需要总结的比赛,交了3题,最后终测的时候3题全部没过,一下掉到了绿名,2333 Problem A 题意:给定区间[l1,r1],[l2,r2],然后给定一个整数k,求区间当中相交的元素, ...
- JQuery的插件开发——重点
1.给JQuery全局对象扩展一个函数方法 $.log=function(){ /* 给全局对象$扩展一个函数*/ } $.log;//调用方法 2.给JQuery普通对象扩展一个函数方法 3.使用第 ...
- linux权限---【600，644，700，755，711，666，777】 - - 博客频道 - CSDN.NET
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- java 单元测试 注入
ApplicationContext appContext = new ClassPathXmlApplicationContext("appContext.xml"); MySQ ...
- Spring自学教程-介绍、特点、框架(一)
一.spring是什么,有什么用? 一句话:面向企业应用,使用javabean代替ejb的java应用或web开发. 侵入式的做法就是要求用户代码"知道"框架的代码,表现为用户代码 ...