对于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>&nbsp;<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的更多相关文章

  1. 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据

    一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...

  2. JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

  3. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  4. Nginx 部署、反向代理配置、负载均衡

    Nginx 部署.反向代理配置.负载均衡 最近我们的angular项目部署,我们采用的的是Nginx,下面对Nginx做一个简单的介绍. 为什么选择Nginx 轻:相比于Apache,同样的web服务 ...

  5. AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...

  6. 微软、谷歌、亚马逊、Facebook等硅谷大厂91个开源软件盘点（附下载地址）

    开源软件中有大量专家构建的代码,大大节省了开发人员的时间和成本,热衷于开源的大厂们总是能够带给我们新的惊喜.2016年9月GitHub报告显示,GitHub已经有超过 520 万的用户和超 30 万的 ...

  7. Google、亚马逊、微软 、阿里巴巴开源软件一览

    Google.亚马逊.微软 .阿里巴巴开源软件一览 大公司为什么要发布开源项目?一是开源能够帮助他人更快地开发软件,促进世界创新,主要是社会价值层面的考虑.二是开源能够倒逼工程师写出更好的代码.三是开 ...

  8. Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器

    一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...

  9. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  10. 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.数据驱动.双向绑定 ...

随机推荐

  1. PL/SQL DEVELOPER 导出表数据

    http://jingyan.baidu.com/album/fcb5aff78e6a48edab4a7146.html?picindex=4 1. 导出表数据 打开pl/sql客户端 在左侧 点击t ...

  2. 转 windows 下 Oracle 导出表结构

      分析Oracle下导出某用户所有表的方法 可能很多使用Oracle的客户都会遇到想把某用户所有表导出的情况,本文就提供这样一个方法帮你轻松解决这个问题. 首先在sqlplus下以该用户登录到Ora ...

  3. 转 oracle 开发 第03章 sqlplus

    目录 1.查看表结构 desc 2.编辑SQL语句 append.list.change.run 3.保存.检索并运行文件 save.get.start.edit.spool 4.格式化列 colum ...

  4. 51nod 区间中第K大的数

    区间中第K大的数 基准时间限制:1 秒 空间限制:131072 KB  一个长度为N的整数序列,编号0 - N - 1.进行Q次查询,查询编号i至j的所有数中,第K大的数是多少. 例如: 1 7 6 ...

  5. dedecms mysql连接错误：#1040 - Too many connections

    mysql能登进去一下,点任何链接又跳出来,然后就登不上了 解决办法:检查mysql所在盘是否还有空间

  6. 试题公式解决方案--kindeditor集成jmeditor公式web编辑器

    最近在搞一套在线的考试系统,一直为即支持公式编辑又得支持各种附件上传.图片上传.视频音频上传.文字编辑 的web编辑器而犯愁.于是乎试着把 kindeditor和jmeditor集成一下,多了不说了直 ...

  7. STL中map的一个知识点

    问题背景 在做USACO Section 1.1 Greedy Gift Givers的时候,我最初的想法是直接用一个map来进行数据处理.但是后来产生一个让我感到疑问的地方,后来我经过测试,发现了这 ...

  8. 利用css3特性写出三角形（兼容IE浏览器）

    利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...

  9. boost库使用说明

    1 下载安装 2 编译的时候,需要添加头文件和链接对应的库

  10. 第一次在手机上跑动ane

    记录一下: 打包的时候先出现 error 100: descriptor cannot be parsed, 原因是命名空间少了个引号,自己粗心所致 第二次打包出现了invalid namespace ...