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>&nbsp;<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>

AngularJs ngApp、ngBind、ngBindHtml、ngNonBindable的更多相关文章

  1. AngularJs学习笔记2-控制器、数据绑定、作用域

    上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1. ...

  2. AngularJS进阶(四十)创建模块、服务

    AngularJS进阶(四十)创建模块.服务 学习要点 使用模块构架应用 创建和使用服务 为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能 ...

  3. AngularJS：何时应该使用Directive、Controller、Service？

    AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC ...

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

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

  5. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  6. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  7. mongoDB 学习笔记纯干货（mongoose、增删改查、聚合、索引、连接、备份与恢复、监控等等）

    最后更新时间:2017-07-13 11:10:49 原始文章链接:http://www.lovebxm.com/2017/07/13/mongodb_primer/ MongoDB - 简介 官网: ...

  8. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

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

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

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

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

随机推荐

  1. ios蓝牙开发（四）app作为外设被连接的实现－转发

    代码下载: 原博客中大部分示例代码都上传到了github,地址是:https://github.com/coolnameismy/demo. 再上一节说了app作为central连接periphera ...

  2. iptables/Netfilter 学习

    开始学iptables,因为它是和路由器技术紧密结合在一起的. iptables的命令看起来眼花缭乱,随便找两个: iptables -A FORWARD -p tcp -s -d -j ACCEPT ...

  3. Mininet的内部实现原理简介

    原文发表在我的博客主页,转载请注明出处. 前言 之前模拟仿真网络一直用的是Mininet,包括写了一些关于Mininet安装,和真实网络相连接,Mininet简历拓扑的博客,但是大多数都是局限于具体步 ...

  4. express+session实现简易身份认证

    本文摘录自<Nodejs学习笔记>,更多章节及更新,请访问 github主页地址.欢迎加群交流,群号 197339705. 文章概览 本文基于express.express-session ...

  5. Linux之我见

    Linux哲学之美 linux就像是一个哲学的最佳实践.如果非要对它评价,我真的不知道该怎么赞叹,我只能自豪的说着:“linux的美丽简直让人沉醉.” 我只能说是我处在linux学习的修炼之路上的一个 ...

  6. js简易函数性能测试器

    如果你不想用浏览器的js性能测试工具,可以用下面这个简单的函数测试一下(1毫秒一下的就测不出来了) function testFn(fn,param){ var start = new Date(). ...

  7. Oracle在中文环境下出现乱码解决办法

       zysong.ttf下载是一款oracle字体乱码解决工具,实质于缺乏中文字体包! 01情况的例子 02情况的例子 01.在开始安装的时候出现乱码 下载zysong.ttf,unzip 解压 一 ...

  8. javascript生成GUID的代码

    <script type="text/javascript"> var Guid = function(){}; Guid.prototype = { S4:funct ...

  9. 思维导图分享以及MindManager使用说明

    来源于: http://www.cnblogs.com/muhongxing/archive/2009/12/22/1628782.html http://www.cnblogs.com/muhong ...

  10. hdu3410 单调队列

    Passing the Message Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...