AngularJs ngApp、ngBind、ngBindHtml、ngNonBindable
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" 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>
(function () {
angular.module("Demo", [])
.controller("testCtrl", testCtrl);
function testCtrl() {
this.hello = "Hello";
this.world = "World";
this.hi = function () {
return "Hi!";
};
};
}());
ngBind相对于{{}}形式绑定的好处就是当你快速刷新或者打开页面那瞬间，不会将绑定代码暴露；相对与{{}}形式来绑定的坏处就是需要载体。所以根据需求来选择用哪个也行，或者ng-cloak避免闪烁。
这个不用过多说明，直接就能看得出这是个绑定数据的指令。
ngBindHtml
创建一个将innerHTML函数所执行的结果绑定到页面指定元素的绑定方式。
格式: ng-bind-html=”value”
value: 将会被html转义并且绑定的字符串。
配合$sce使用：
.hello { width: 300px; height: 300px; background: #ccc; color: red; }
<div ng-app="Demo" ng-controller="testCtrl as ctrl">
<div ng-bind-html="ctrl.htmlText"></div>
</div>
(function () {
angular.module("Demo", [])
.controller("testCtrl", ["$sce",testCtrl]);
function testCtrl($sce) {
this.htmlText = '<div class="hello">Hello Wrold</div>';// Error: [$sce:unsafe]Attempting to use an unsafe value in a safe context.
this.htmlText = $sce.trustAsHtml(this.htmlText); // ok 能正常输出html了
};
}());
引入angular-ngSanitize.js使用：
<div ng-app="Demo" ng-controller="testCtrl as ctrl">
<div ng-bind-html="ctrl.htmlValue"></div>
</div>
(function () {
angular.module("Demo", ["ngSanitize"])
.controller("testCtrl", [testCtrl]);
function testCtrl() {
this.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>
}9OY`3[)[S.gif)
AngularJs ngApp、ngBind、ngBindHtml、ngNonBindable的更多相关文章
- AngularJs学习笔记2-控制器、数据绑定、作用域
上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1. ...
- AngularJS进阶(四十)创建模块、服务
AngularJS进阶(四十)创建模块.服务 学习要点 使用模块构架应用 创建和使用服务 为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能 ...
- AngularJS：何时应该使用Directive、Controller、Service？
AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC ...
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- mongoDB 学习笔记纯干货（mongoose、增删改查、聚合、索引、连接、备份与恢复、监控等等）
最后更新时间:2017-07-13 11:10:49 原始文章链接:http://www.lovebxm.com/2017/07/13/mongodb_primer/ MongoDB - 简介 官网: ...
- JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- 微软、谷歌、亚马逊、Facebook等硅谷大厂91个开源软件盘点（附下载地址）
开源软件中有大量专家构建的代码,大大节省了开发人员的时间和成本,热衷于开源的大厂们总是能够带给我们新的惊喜.2016年9月GitHub报告显示,GitHub已经有超过 520 万的用户和超 30 万的 ...
- Google、亚马逊、微软 、阿里巴巴开源软件一览
Google.亚马逊.微软 .阿里巴巴开源软件一览 大公司为什么要发布开源项目?一是开源能够帮助他人更快地开发软件,促进世界创新,主要是社会价值层面的考虑.二是开源能够倒逼工程师写出更好的代码.三是开 ...
随机推荐
- left join 条件区别
t1: num | name-----+------ 1 | a 2 | b 3 | c t2: num | value-----+------- 1 | xxx 3 ...
- 如何优化 FineUI 控件库的性能，减少 80% 的数据上传量！
在开始正文之前,请帮忙为当前排名前 10 唯一的 .Net 开源软件 FineUI 投一票: 投票地址: https://code.csdn.net/2013OSSurvey/gitop/codevo ...
- [MCSM]伪随机数和伪随机数生成器
1. 几个问题 为什么需要随机数? 伪随机数伪在哪里? 为何要采用伪随机数代替随机数?这种代替是否有不利影响? 如何产生(伪)随机数? 以下内容将围绕这几个问题依次说明. 2. 参考 http://e ...
- bootstrap点滴
1.nav-stacked 这个属性可以决定 tab的变为竖的,不添加的话为横向的. 2.tab 横向的 ul中必须含有nav nav-tabs ul li a 中必须有data-toggle=&q ...
- 关于最近折腾的ubuntu12.10
win7旗舰正版up1 UltraISO + ubuntu-12.10-desktop-i386.iso + 4GKingston = 启动U盘 USB HDD 启动 进入ubuntu桌面,安装,磁盘 ...
- 屠龙之路_坚持就是胜利_NinthDay
狭小的空间里,屠龙天团的少年们和alpha恶龙苦苦对峙了一夜!这恶龙还挺能熬的,厉害了word龙.无奈之下,五更天的时候,我们的屠龙少年只能先退出战场养精蓄锐,为了不让恶龙再次逍遥法外,机智的屠龙队长 ...
- [Bundling and Minification ] 二、绑定的作用
本篇接上一篇[Bundling and Minification ] 一.如何绑定 Bundling的作用有二,一是合并文件减少资源请求的个数缩短资源请求的时间.二是自动更新到最新js或者css,当合 ...
- HTML5基础知识（4）--white-space属性
1.white-space 属性设置如何处理元素内的空白. 这个属性声明建立布局过程中如何处理元素中的空白符.值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的. 默认值: no ...
- Jenkins的maven工程打包的时候怎么指定不同环境的配置文件
http://outofmemory.cn/code-snippet/6643/maven-profile-define-enviroment-package 在打包的时候我们添加上 这里我们指定配置 ...
- Jenkins+svn+maven
首先我们在我们的服务器上安装好svn和maven 这里在前两步骤基本上没有啥问题,主要就是在Jenkins的步骤我弄了好长时间,这里记录一下 Jenkins的问题我是在这个网址解决的:http://b ...