对于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. Android中的自定义Adapter（继承自BaseAdapter）——与系统Adapter的调用方法一致——含ViewHolder显示效率的优化(转)

    Android中很多地方使用的是适配器(Adapter)机制,那我们就要好好把这个Adapter利用起来,并且用出自己的特色,来符合我们自行设计的需要喽~~~ 下面先上一个例子,是使用ViewHold ...

  2. 转：Visual Studio进行Web性能测试- Part I

    原文作者:Ambily.raj Visual Studio是可以用于性能测试的工具之一.Visual Studio Test版或Visual Studio 2010旗舰版为自动化测试提供了支持.本文介 ...

  3. JS动态生成<style>

    var nod = document.createElement(“style”), str = “body{background:#000;color:#fff} a{color:#fff;text ...

  4. USACO 1.3.1

    题目链接:USACO 1.3.1 简单的贪心,将cent从小到大排序. /* ID:wang9621 PROG:milk LANG:C++ */ #include <iostream> # ...

  5. 合并BIN文件的两种方法(转)

    源:http://blog.chinaunix.net/uid-20745340-id-1878803.html 合并BIN文件的两种方法 在单片机的开发过程中,经常需要将两个单独的BIN文件合并成一 ...

  6. java中HashMap详解（转）

    java中HashMap详解 博客分类: JavaSE Java算法JDK编程生活       HashMap 和 HashSet 是 Java Collection Framework 的两个重要成 ...

  7. C#使用FFmpeg 将视频格式转换成MP4示例

    一.常用视频格式分辨率 640x480p 720p格式,分辨率为1280×720p / 60Hz,行频为45kHz 1080p格式,分辨率为1920×1080逐行扫描,专业格式 二.FFmpeg部分参 ...

  8. JS中判定问题

    今天项目遇到一个很奇怪的问题,具体问题不好说明简化下,有如下一个方法: function editStu(index, rowData) { if (index == "") { ...

  9. ACM录 之 常识和错误。

    接下来说说一些ACM里面的常识和错误...(可能会比较乱) —— 首先ACM里面的代码都是要提交上去,然后让计算机自动判题的,所以...千万不要把 system("pause"); ...

  10. 函数之return

    return语句用来从一个函数 返回 即跳出函数.我们也可选从函数 返回一个值 .使用字面意义上的语句~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 例7.7 使用字面意义上的语句 ...