美文网首页
2017-5-21 AngularJS学习笔记

2017-5-21 AngularJS学习笔记

作者: GodlinE | 来源:发表于2017-05-21 18:13 被阅读0次

指令作用域

  • 自定义指令可以又自己的控制器,自己的模型和作用域
  • 默认情况,指令使用的模型是和它所在的控制器的模型是同一个模型
  • 注意:使用指令时,一定要注意大小写
  • 如果定义指令名称为大写,使用自定义指令时要用 - 转换
  • 如:定义指令名称 'skDir',使用自定义指令时转换成 'sk-dir'
<body ng-app='app' ng-controller='xmgController'>
          <input type='text' ng-model='msg'>
          <sk-dir></sk-dir>
</body>
<script src='js/angular.js'></script>
<script>
          var app = angular.module('app',[]);
          app.controller('xmgController',['$scope',function($scope){
                  $scope.msg = '666';
          }]);
          app.directive('skDir',function(){
                  return {
                          restrict:'EA',
                          template:'<h1>{{msg}}</h1>',
                          replace:true,
                          controller:function($scope){
                                  $scope.msg="我是指令的 msg"
                          }
                  }
})
</script>

过滤器

在 AngularJS 中,使用过滤器格式化展示数据,作用就是接收一个输入,通过某个规则进行处理,然后范湖处理结果

angular 内置了9个过滤器

  • 1.currency:将数值格式化为货币格式
    <p>{{price | currency:'$'}}</p>
  • 2.date:日期格式化
    <p>{{nowTime | date:'yyyy-MM-dd hh:mm:ss'}}</p>
  • 3.limitTo:取出字符串或数组前几位(正数),或后几位(负数)
    <p>{{course | limitTo:-1}}</p>
  • 4.uppercase:将文本转换成大写格式
  • 5.lowercase:将文本转换称小写格式
    <p>{{str1 | uppercase}}</p>
    <p>{{str2 | lowercase}}</p>
  • 6.number:数字格式化,可控制保留几位小数位数
    <p>{{num | number:2}}</p>
  • 7.orderBy: 对数组进行排序,第二个参数可控制方向,默认是 false 升序
<p>{{score | orderBy:'' : false}}</p>
<p>{{stu | orderBy:'age' :true}}</p>
............................
$scope.course = ['html','css','js'];
$scope.stu = [
          {name:'sk',age:22},                      
          {name:'sk1',age:25},
          {name:'sk2',age:12},
          {name:'sk3',age:34},
          {name:'sk4',age:23}
];
  • 8.filter: 在给定数组中选择满足条件的一个子集,并返回一个新的数组,其提哦案件可以是一个字符串,对象,函数
<input type="text" ng-model="search">
<p>{{curse | filter:search}}</p>
//输入一个字符,就会把包含此字符的数组元素显示出来
<ul>
        <li ng-repeat='value in course | filter:search'>{{value}}</li>
</ul>
............................
$scope.course = ['html','css','js'];
$scope.stu = [
          {name:'sk',age:22},                      
          {name:'sk1',age:25},
          {name:'sk2',age:12},
          {name:'sk3',age:34},
          {name:'sk4',age:23}
];

管道符

  • 管道符:把上次的结果作为下次参数传递 “|”
  • 注意:过滤器本质是一个方法/函数/function
  • 过滤器会自动把 '|'前面的内容,当作方法第一个参数传递
<p>{{price | currency:"$"}}</p>
function currency(input,arg){
        return arg + input;
}
  • 注意2:如果想要自己手动传参,使用冒号 ':'传递

自定义过滤器

  • AngularJS 内置过滤器,还可以根据业务需要自定义过滤器
  • 通过模块对象实例提供的 filter 方法定义过滤器
  • 自定义过滤器
  • 参数一:过滤器名称
  • 参数二:回调函数
  • 返回为一个函数(input 为自动传入的数据,input 为管道符前面的内容)
app.fliter('skCur',function(){
        return function(input,args){
                  return args + input
        }
})
app.filter('firstUppercase',function(){
        return function(input,args){
                return input[0].toUpperCase() + input.slice(1);
        }
})

依赖注入

  • AngularJS 采用模块化的方式组织代码,将一些通用逻辑封装成一个对象或者函数,实现最大成都的复用,这导致了使用者和被使用者之间存在依赖关系
  • 所谓依赖注入是指在运行时自动查找依赖关系,然后将查找到依赖传递给使用者的一种机制
  • 依赖注入分为两种:
  • 行内注入
    以数组形式明确声明依赖,数组元素都是包含依赖名称的字符串,数组最后一个元素是依赖注入的目标函数
  • 推断式注入
    1.没有明确声明依赖,AngularJS 会将函数参数名称当成是依赖名称
    2.这种方式会带来一个问题,当代码经过压缩后函数的参数被压缩,这样便会造成依赖无法找到,所以不建议使用

相关文章

  • 2017-5-21 AngularJS学习笔记

    指令作用域 自定义指令可以又自己的控制器,自己的模型和作用域 默认情况,指令使用的模型是和它所在的控制器的模型是同...

  • angular学习资源整理

    中文学习资源: AngularJS学习笔记 – 邹业盛

  • spark_learn

    Angular2学习笔记——NgModule es6 新增的map和foreach AngularJS2.0 学习...

  • angularjs学习笔记

    1、$event.stopPropagation(); 阻止事件冒泡。

  • AngularJS学习笔记

    Angular.js简介 AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静...

  • angularjs 学习笔记

    应该熟练应用基本属性及指令比如:ng-model ng-if ng-repeat ng-show 变量输出等 清...

  • AngularJS学习笔记

    引入angular.js 若在页面中引入了angular.js并添加了ng-app="app" ng-contro...

  • Angularjs学习笔记

    表达式 AngularJS 的表达式写在双大括号内{{ expression }},这把数据绑定到HTML。表达式...

  • AngularJS学习笔记

    1、什么是angularjs AngularJS是一个框架(诸多类库的集合)以数据和逻辑做为驱动(核心)。 Ang...

  • AngularJS学习笔记

    1. 介绍 AngularJS是一款由Google公司开发维护的前端MVC框架,其克服了HTML在构建应用上的诸多...

网友评论

      本文标题:2017-5-21 AngularJS学习笔记

      本文链接:https://www.haomeiwen.com/subject/ykymxxtx.html