angular表达式的一些特点

  • 属性表达式:
    • 属性表达式是对应于当前作用域,Javascript对应的是全局window对象。
    • AngularJS要使用window作用域的话得用$window来指向全局window对象。 比如说,你使用window中定义的alert()方法,在AngularJS表达式中必须写成$window.alert()才行
  • 允许未定义值
    • 执行表达式时,AngularJS能够允许undefined或者null,不像Javascript会抛出一个异常
  • 不能在AngularJS表达式中使用“条件判断”、“循环”、“抛出异常”等控制结构。
  • 通过过滤器链来传递表达式的结果。例如将日期对象转变成指定的阅读友好的格式。

如:{{1+2}}

filter

过滤器就是用来过滤变量值,支持链式的写法如下:

{{ expression | filterName : parameter1 : ...parameterN }}

内建的9种过滤器

currency,date,filter,json,limitTo,lowercase,number,orderBy,uppercase

{{ 12.0 | currency:"USD$" }}
{{12.9 | currency | number:0 }}
{{ 1304375948024 | date }}
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
{{ "lower cap string" | uppercase }}
{{ {foo: "bar", baz: 23} | json }}
ng-repeat="phone in phones | filter:query | orderBy:orderProp"

filter xxx, 可以根据网页中输入的xxx值进行过滤和, 增强了页面的交互效果

orderBy 过滤 器以一个数组作为输入,复制一份副本,然后把副本重排序再输出到迭代器

自定义过滤器

只需要通过app.filter定义需要的filter即可。

var app = angular.module('myapp', []);
app.filter('filter3',function(){
return function(items){
angular.forEach(items,function(item){
item = item + '!'
});
return items;
}
});

ng指令

以下用不同的方式匹配到ngBind指令

<span ng:bind="name"> angular
<span ng_bind="name"> angular
<span ng-bind="name"> angular
<span data-ng-bind="name"> angular
<span x-ng-bind="name"> angular

Angular内部提供的指令基本都能匹配属性名,标签名,注释,或者类名, 如:

<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>

自定制指令

//html
<div ng-controller="Ctrl">
<my-customer customer="naomi"></my-customer>
</div> //js
var app = angular.module('testTpl', []); app.controller('Ctrl', function($scope) {
$scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
$scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };
});
app.directive('myCustomer', function() {
return {
transclude: true,
restrict: 'ACE',
templateUrl: 'my-customer.html',
scope: {
customer: '='
},
controller: function() {
return {
openApi: function() { console.log('api init'); }
}
}
};
});
app.directive('myCustomer1', function() {
return {
transclude: true,
restrict: 'ACE',
require: '^myCustomer',
templateUrl: 'my-customer.html',
scope: {
customer: '='
},
link: function(scope, element, attrs, myCustomer) {
//因为使用了require, 会多增加一个参数myCustomer来调用myCustomer指令控制器开放的API
}
};
});
// my-customer.html
Name: {{customer.name}} Address: {{customer.address}}
<hr>
Name: {{vojta.name}} Address: {{vojta.address}}
  • restrict: 代表匹配指令的模式, 'A' 仅匹配属性名字 ,  'E' 仅匹配元素名字, ‘C’  仅匹配类名
  • scope: 可以用来隔离了除了你添加到作用域以外的其他数据模型。
  • transclude: 允许内部模块使用外部作用域。 在templateUrl对应的模块中使用ng-transclude,指令可以将外部作用域的模版作为内部的嵌套模板,类似freemarker的nested
  • controller:  可以开发API给其它指令使用, 完成指令之间的通信
  • require: '^'前缀意味着指令在它的父元素上面搜索控制器, 默认会在自身的元素上面搜索指定的指令

常用的内置指令

  • ng-app
  • ng-repeat
  • ng-controller
  • ng-bind-template
  • ng-model
    • 完成双向绑定的基础
  • ng-src
    • AngularJS在页面载入完毕时才开始编译, ngSrc指令会避免当浏览器载入时请求图片地址未解析导致的错误
  • ng-view
    • $route服务通常和ngView指令一起使用。ngView指令的角色是为当前路由把对应的视图模板载入到布局模板中
  • ng-click
  • ng-init
  • ng-class

参考

angular 表达式与指令的更多相关文章

  1. angularJS表达式和指令

    主要是描述angularJS如何扩展html的:(模型后面会涉及) 例子1:通过指令来扩展html <body ng-app="myapp">  <!--  ng ...

  2. Angular.js之指令学习笔记

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  3. angular内置指令相关知识

    原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...

  4. Angular内置指令(二)

    目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...

  5. Angular内置指令(一)

    要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突  目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng- ...

  6. angularjs学习总结一(表达式、指令、模型)

    一:自执行匿名函数 (function(){ /*code*/})();自执行匿名函数:常见格式:(function() { /* code */ })();解释:包围函数(function(){}) ...

  7. 秒味课堂Angular js笔记------指令

    1.属性指令 angularjs样式相关指令: ng-class ng-style ng-href ng-src ng-attr-(suffix) ng-bind ng-cloak  没解析完之前标签 ...

  8. Angular内置指令

    记录一下工作中使用到的一些AngularJS内置指令 内置指令:所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突 1. ng-model 使用ng-model实现双向绑定,通过表单的 ...

  9. angular中重要指令介绍($eval,$parse和$compile)

    在angular的服务中,有一些服务你不得不去了解,因为他可以说是ng的核心,而今天,我要介绍的就是ng的两个核心服务,$parse和$compile.其实这两个服务讲的人已经很多了,但是100个读者 ...

随机推荐

  1. 3.sass的数据类型与函数

    数据类型 在sass里有数字.字符串.列表.颜色等类型 在cmd里 输入 sass -i 就会进入到交互模式,输入的计算可以马上得到结果 type-of()可以用来得到数据类型,如: type-of( ...

  2. avro 1.8.2 (js)

    5月15日发布的avro 1.8.2 已经包含了js版代码. 清华大学镜像地址: https://mirrors.tuna.tsinghua.edu.cn/apache/avro/avro-1.8.2 ...

  3. flask 动手写的接口平台

    笔者做的是测试,在群里经常有人讨论,怎么和开发对接怎么难,怎么测接口比较难,开发不愿因写文档等等,是啊,我感觉也是这样,沟通,还有我们应该怎样去学习,去扩充自己,让自己不再受开发所左右, 笔者就像试图 ...

  4. js随机数生成,生成m-n的随机数

    使用js生成n到m间的随机数字,主要目的是为后期的js生成验证码做准备,Math.random()函数返回0和1之间的伪随机数 var random = Math.random(); console. ...

  5. WebSocket协议:5分钟从入门到精通

    一.内容概览 WebSocket的出现,使得浏览器具备了实时双向通信的能力.本文由浅入深,介绍了WebSocket如何建立连接.交换数据的细节,以及数据帧的格式.此外,还简要介绍了针对WebSocke ...

  6. css中使用if条件在各大浏览器(IE6\IE7\IE8)中hack方法解决教程

    一个滚动代码,其他浏览器都滚的好好的,就IE出现错误,DIV+CSS if条件hack,这里DIVCSS5为大家介绍针对各大浏览器(IE6\IE7\IE8)中使用if条件hack方法教程,DIV CS ...

  7. alpha rarefaction using qiime

    shannon菌群多样性指数 H=-∑(Pi)(㏑Pi) Pi=样品中属于第i种的个体的比例,如样品总个体数为N,第i种个体数为ni,则Pi=ni/N: 各种之间,个体分配越均匀,H值就越大.如果每一 ...

  8. jsonp及cors

    一. jsonp实现原理是利用script标签可以获取不同源资源的特点,来达到跨域访问某个资源的目的.具体行为如下: 创建一个script标签,将请求地址写入它的src属性,将这个script外链插入 ...

  9. 转:java.lang.OutOfMemoryError: Java heap space错误及处理办法(收集整理、转)

    以下是从网上找到的关于堆空间溢出的错误解决办法: Java.lang.OutOfMemoryError: Java heap space =============================== ...

  10. socket对象放在一个datagridview的row的tag里面在拿出来 为什么是已释放

     socket对象放在一个datagridview的row的tag里面在拿出来 为什么是已释放