angular 表达式与指令

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

 

参考

 

posted @ 2014-09-22 13:28  mininice  阅读(2142)  评论(0)  编辑  收藏  举报