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

写文章不是为了写出来给别人看才写的,把自己的学习过程记录下来,对学习做个总结,让自己记的更深些,以后还可以回过来看看;如果有人愿意看看的话也可以来个交流,分享分享大家不同的理解和经验..

时间: 2024-11-11 13:52:42

Angular - - ngApp、ngBind、ngBindHtml、ngNonBindable的相关文章

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

本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI-Router的onEnter和onExit事件 AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新.查看路由,路由事件和URL格式,获取路由参数,路由的Resolve3.AngularJS路由系列(3)-- UI-Rou

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.数据驱动.双向绑定.MVVM设计模式.组件化开发.单页面应用 Vue环境:本地导入和cdn导入 2.Vue是渐进式js框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目.3.怎么使用vue 去官网下载然后导入 <div id="app">

WAF——针对Web应用发起的攻击,包括但不限于以下攻击类型:SQL注入、XSS跨站、Webshell上传、命令注入、非法HTTP协议请求、非授权文件访问等

核心概念 WAF Web应用防火墙(Web Application Firewall),简称WAF. Web攻击 针对Web应用发起的攻击,包括但不限于以下攻击类型:SQL注入.XSS跨站.Webshell上传.命令注入.非法HTTP协议请求.非授权文件访问等.

IOS-网络(GET请求和POST请求、HTTP通信过程、请求超时、URL转码)

1 // 2 // ViewController.m 3 // IOS_0129_HTTP请求 4 // 5 // Created by ma c on 16/1/29. 6 // Copyright © 2016年 博文科技. All rights reserved. 7 // 8 9 #import "ViewController.h" 10 #import "MBProgressHUD+MJ.h" 11 12 @interface ViewController

二叉搜索树建立、插入、删除、前继节点、后继节点之c++实现

一.前言 一直以来,都对树有关的东西望而却步.以前每次说要看一看,都因为惰性,时间就那么荒废掉了.今天下个决心,决定好好的数据结构中的东西看一下.不知道看这篇文章的你,是不是和我有同样的感受,空有一颗努力的心,却迟迟没有付出行动.如果是的话,如果也想好好的把树的知识巩固一下的话,就让我们一起好好儿地把知识点过一遍吧.本文争取让看完的每一个没有基础的同学,都能有所收获.在正文开始前,先给自己加个油.加油(^ω^) 二.二叉搜索树的定义 二叉搜索树是指,对于某一个节点而言,它左边的节点都小于或等于它

DNS2之bind安装、主从配置同步、子域创建、view配置

主DNS配置从服务器: 我们知道,DNS服务器在网络服务中可能出现故障当机等状况,会导致DNS服务瘫痪,显然在实际的网络应用中我们不希望出现这种状况,所有我们就要配置从服务器来在主DNS服务器出现故障时代替他来工作,然而作为价格昂贵的服务器本身你又不希望出现这种极大的浪费,所有从服务器在实际工作中是和主服务器共同分担DNS解析任务的,这样既解决了服务器故障导致的问题,还可以缓解DNS服务器的压力. 那么要配置一个从服务器我们又该怎么做呢? 前提:我们要为本地配置一个从服务器aolens2.从服务

代写Python、代做Python、Python作业代写、Python代写(微信leechanx)

代写Python.代做Python.Python作业代写.Python代写(微信leechanx) i++ VS ++i性能区别 i++ 为 function () { tmp = i; i = tmp + 1; return tmp; } ++i 为 function () { i = i + 1; return i; }

Extjs5.0从入门到实战开发信息管理系统(Extjs基础、Extjs5新特性、Spring、Spring mvc、Mybatis)视频教程

Extjs5.0从入门到实战开发信息管理系统(Extjs基础.Extjs5新特性.Spring.Spring mvc.Mybatis)视频教程下载   联系QQ:1026270010 Extjs作为一款优秀的JS前端开发框架以其良好的架构.丰富的UI组件库.完善的文档和社区支持等诸多优点拥有广泛的市场应用空间,开发人员无需过多的关注HTML.CSS甚至各种常用JS算法,只需把精力放在业务逻辑上,利用各种组件的相互组合调用便可轻松而高效的开发出系统的前端页面. Extjs5在之前版本的基础上又推出

Windows Server 2012 磁盘管理之 简单卷、跨区卷、带区卷、镜像卷和RAID-5卷

今天给客户配置故障转移群集,在Windows Server 2012 R2的系统上,通过iSCSI连接上DELL的SAN存储后,在磁盘管理里面发现可以新建 简单卷.跨区卷.带区卷.镜像卷.RAID-5卷等: 之前从来没接触过这些,于是上网学习了一番,下面分别是他们的介绍 简单卷 简单卷是在单独的动态磁盘中的一个卷,它与基本磁盘的分区较相似.但是它没有空间的限制以及数量的限制.当简单卷的空间不够用时,您也可以通过扩展卷来扩充其空间,而这丝毫不会影响其中的数据. 创建简单卷的方法: 右键单击"我的电

java架构师、高性能、高并发、高可用、高可扩展、性能优化、集群、电商网站架构

15套java架构师.集群.高可用.高可扩展.高性能.高并发.性能优化.Spring boot.Redis.ActiveMQ.Nginx.Mycat.Netty.Jvm大型分布式项目实战视频教程 视频课程内容包含: 高级Java架构师包含:Spring boot.Spring  cloud.Dubbo.Redis.ActiveMQ.Nginx.Mycat.Spring.MongoDB.ZeroMQ.Git.Nosql.Jvm.Mecached.Netty.Nio.Mina.性能调优.高并发.to