angularjs过滤器(number)

2014年8月22日 21:13

用来精确浮点数(指定小数点位数).

在html中用法

{{ number_expression | number : fractionSize}}

在js中用法

$filter('number')(number, fractionSize)

参数

  • number 待精确的数字
  • factionSize(可选) 小数点后精确位数,默认值是3.
默认情况下保留的小数位数小于等于3. 比如: 1234-->1234;1234.56789-->1234.568;1234.56-->1234.56)

例子

<!doctype html>
<html ng-app='demo'>
<meta charset='utf-8'>
<body>
<div ng-controller="ExampleController">
  输入数字: <input ng-model='val'><br>
  <!-- 默认格式 -->
  默认格式: <span id='number-default'>{{val | number}}</span><br>
  <!-- factionSize=0 -->
  保留0位: <span>{{val | number:0}}</span><br>
  <!--factionSize大于小数点位数 -->
  保留10位: <span>{{val | number:10}}</span><br>
  <!-- factionSize小于小数点位数-->
  保留2位: <span>{{val | number:2}}</span>
</div>

<script src="/static/lib/angular/angular.js"></script>
<script src="/static/lib/angular-resource/angular-resource.min.js"></script>
<script>
    var app = angular.module('demo', ['ngResource'])
    .controller('ExampleController', function($scope) {
        $scope.val = 1234.56789;
    });
</script>
</body>
</html>
 
显示结果
输入数字: 1,234.56789
默认格式: 1,234.568
保留0位: 1,235
保留10位: 1,234.5678900000
保留2位: 1,234.57
 

Tags: angularjs;过滤器;number
评论(0) 阅读(3611)

angularjs指令名是怎么回事?

2014年8月12日 12:06

疑惑

查了很多资料,对指令名的介绍都是一笔带过,只说是驼峰形式. 但是在实际使用时,经常遇到定义的指令名与指令标签对应不上的情况. 对指令名就感到非常疑惑. 定义时指令名是一种形式,使用时又是一种形式,两者怎么关联对应的?
 
找不到资料,自己查查angular源码,一探究竟.

分析源码

首先在angular.js文件,找到解析指令名的代码
switch(nodeType) {
  case 1: /* Element */
    // use the node name: <directive>
    //此处是解析标签形式的指令
    addDirective(directives,
        directiveNormalize(nodeName_(node).toLowerCase()), 'E', maxPriority, ignoreDirective);

    // iterate over the attributes
    for (var attr, name, nName, ngAttrName, value, isNgAttr, nAttrs = node.attributes,
             j = 0, jj = nAttrs && nAttrs.length; j < jj; j++) {
      var attrStartName = false;
      var attrEndName = false;

      attr = nAttrs[j];
      if (!msie || msie >= 8 || attr.specified) {
        name = attr.name;
        value = trim(attr.value);

        // support ngAttr attribute binding
        ngAttrName = directiveNormalize(name);
        if (isNgAttr = NG_ATTR_BINDING.test(ngAttrName)) {
          name = snake_case(ngAttrName.substr(6), '-');
        }

        var directiveNName = ngAttrName.replace(/(Start|End)$/, '');
        if (ngAttrName === directiveNName + 'Start') {
          attrStartName = name;
          attrEndName = name.substr(0, name.length - 5) + 'end';
          name = name.substr(0, name.length - 6);
        }

        //此处是解析属性形式的指令名
        nName = directiveNormalize(name.toLowerCase());
        attrsMap[nName] = name;
        if (isNgAttr || !attrs.hasOwnProperty(nName)) {
            attrs[nName] = value;
            if (getBooleanAttrName(node, nName)) {
              attrs[nName] = true; // presence means true
            }
        }
        addAttrInterpolateDirective(node, directives, value, nName);
        addDirective(directives, nName, 'A', maxPriority, ignoreDirective, attrStartName,
                      attrEndName);
      }
    }
上面一处是解析标签形式的指令名,调用了directiveNormalize(nodeName_(node).toLowerCase())
另一处是解析属性形式的指令名,调用了directiveNormalize(name.toLowerCase())
两处都使用了toLowerCase()
所以解析指令的第一步:将指令名转为小写.
 
继续看directiveNormalize()函数
var PREFIX_REGEXP = /^(x[\:\-_]|data[\:\-_])/i;
/**
 * Converts all accepted directives format into proper directive name.
 * All of these will become 'myDirective':
 *   my:Directive
 *   my-directive
 *   x-my-directive
 *   data-my:directive
 *
 * Also there is special case for Moz prefix starting with upper case letter.
 * @param name Name to normalize
 */
function directiveNormalize(name) {
  return camelCase(name.replace(PREFIX_REGEXP, ''));
}
它使用用了name.replace(PREFIX_REGEXP, ''),它的作用是去掉x和data开始的前缀
所以解析指令的第二步: 去掉以x-和data-开头的前缀(例如 x- x: x_ data- data: data_ 忽略大小写)
 
 
再继续看camelCase()函数
var SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
var MOZ_HACK_REGEXP = /^moz([A-Z])/;
var jqLiteMinErr = minErr('jqLite');

/**
 * Converts snake_case to camelCase.
 * Also there is special case for Moz prefix starting with upper case letter.
 * @param name Name to normalize
 */
function camelCase(name) {
  return name.
    replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
      return offset ? letter.toUpperCase() : letter;
    }).
    replace(MOZ_HACK_REGEXP, 'Moz$1');
}
使用了两个replace替换字符,第二个replace不用管,重点看第一个replace,它是什么作用?
 
把它拿出来看看
var SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
function camelCase(name) {
  return name.
    replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
      console.log("_:" + _)
      console.log("separator:" + separator)
      console.log("letter:" + letter)
      return offset ? letter.toUpperCase() : letter;
    }).
}
console.log("----my-directive")
console.log(camelCase(my-directive));

console.log("----mydirective")
console.log(camelCase(my-directive));

console.log("----mydirectiveworld")
console.log(camelCase(my-directive));
/* 
输出内容
----my-directive
_:-d
separator:-d
letter:d
myDirective

----mydirective
mydirective

----mydirectiveworld
mydirectiveworld
*/
可以看到第一个replace作用是生成驼峰指令名
所以解析指令的第三步:根据分割符(: - _)标记,将字符转换为驼峰形式
 
关于replace函数的说明,可以看看这篇文章
http://yongqing.is-programmer.com/posts/56305.html
 
 
更多指令名与指令对应的示例
以分割符"-"为例
mymenu --> mymenu   正确
mymenu --> myMenu   错误
mymenu --> my-Menu  错误

myMenu --> my-Menu  正确
myMenu --> myMenu   错误
myMenu --> mymenu   错误

MyMenu --> x-MyMenu 正确
MyMenu --> MyMenu   错误
MyMenu --> mymenu   错误

myProductsMenu --> my-Products-Menu   正确
myProductsMenu --> myProductsMenu     错误
myProductsMenu --> my-ProductsMenu    错误

总结

指令的匹配过程
  1. 将指令名转换为小写.
  2. 去掉以x-和data-开头的前缀(例如 x- x: x_ data- data: data_ 忽略大小写)
  3. 根据分割符(: - _),转换为驼峰形式
其实只要注意一点: 匹配过程以定义时的指令名为准,分割符是用来标识驼峰的(angular没有能力识别单词,分割符的一个作用是标识驼峰).
 

Tags: angularjs;指令
评论(0) 阅读(1130)

理解指令的restrict属性

2014年7月30日 01:26

restrcit属性说明
restrict: EACM中的任意一个之母。它是用来限制指令的声明格式的。
E - 元素名称:<my-directive></my-directive>
A - 属性: <div my-directive="exp"> </div>
C - 类名:<div class="my-directive: exp;"></div>
M - 注释: <!-- directive: my-directive exp -->
 
它做了什么
示例
<html ng-app='app'>
<body>
    <hello> </hello>
    <div hello> </div>
    <div class="hello"> </div>
    <!-- directive: hello -->
</body>

<script src="bower_components/angular/angular.js"></script>
<script>
var appModule = angular.module('app', []);
appModule.directive('hello', function() {
    return {
        restrict: 'AEC',
        template: '<h3>Hi there</h3>',
        replace: true
    };
});
</script>
</html>
 
运行结果
<h3>Hi there</h3>
<h3 hello>Hi there</h3>
<h3 class="hello">Hi there</h3>
<h3>Hi there</h3>
可以看到几种方式,做的事情一样,只有部分区别. 这些区别有什么作用,用在什么场合?
 
使用场合
restrict=E时,浏览器无法识别指令的声明元素,那么可以知道这个指令一定是起替换作用,也就是说template一定有值.
restrict=A时,指令是以元素属性形式存在的,这个指令的作用则可以不是替换作用. 那么它可以做什么?以link方式操作dom.
比如为元素聚焦
<input type="input" focus/>

appModule.directive('focus', function() {
    return {
        restrict: 'A',
        link:function(scope, elem, attrs){
            $(elem).focus();
        }
    };
});
restrict=C,则是在绑定指令的同时,指定它的css样式,让指令与样式同步.
restrict=M,则在一些场合非常有用,方便在注释与代码之间切换.
 
 

评论(4) 阅读(1828)