Angular.js

[magicdawn]

No description provided.

[magicdawn]

factory / service / provider

• http://my.oschina.net/tanweijie/blog/295067
• https://segmentfault.com/a/1190000003096933#articleHeader6
• https://docs.angularjs.org/api/auto/service/$provide

An Angular service is a singleton object created by a service factory. These service factories are functions which, in turn, are created by a service provider. The service providers are constructor functions. When instantiated they must contain a property called $get, which holds the service factory function.

一个service是一个单例对象, 由 service factory创建, service factory 由 service provider创建。
service provider是一个 constructor function, 必须包含一个 $get 方法, 即是 service factory的引用。

例如 $log & $logProvider, 在文档中只能指出 $logProvider 的source https://github.com/angular/angular.js/blob/master/src/ng/log.js#L41
这个 (new $LogProvider()).$get() 即是 $log ~ 艾玛, 好复杂。。。

那么

• app.provider 直接点
• app.factory(fn) 是将 $get = fn
• app.service(ConFn) 是在 $get 里 return new ConFn

简单来说

angular.module('app', [])
  .factory('foo', function(){
    return {
      hello: 'world'
    };
  })
  .service('bar', function(){
    this.hello = 'world';
  })
  .provider('xyz', function(){
      this.$get: function(){
        return {
          hello: world
        };
      };
  })

[magicdawn]

实例

https://github.com/dalelotts/angular-bootstrap-datetimepicker

v0.3.14

• data-ng-model 可以显示, 但拿 $scope 取的是旧值
• 无法升级, 使用 bower install 可以安装, 但不能被 wiredep inject

[magicdawn]

过滤器

https://docs.angularjs.org/api/ng/filter

使用

{{ data | date: 'yyyy-MM-dd' }}

过滤器名称 :参数1 :参数2

常用过滤器

• currency 货币
• date 日期格式化, see https://docs.angularjs.org/api/ng/filter/date
• filter, 参数类型
  • 字符串, 进行 contains 处理, 取反加 !
  • 函数, 进行 filter
• json JSON.stringify
• limitTo 限制长度, 可为负数
• lowercase / uppercase 转换大小写
• number: 保留小数位数
• orderBy

自定义

app.filter('custom', function(){
  return function(input, arg1){
    return 'custom-' + input;
  };
});

[magicdawn]

directive 指令

内置的 directive

ng-repeat

• $index 0 ... (len-1)
• $first / $last 第一个 / 最后一个
• $middle 非第一个 & 非第二个
• $even $index 值是偶数
• $odd $index 值是奇数

ng-bind

<div ng-bind='someVar'></div>

实现的是绑定 innerHTML

ng-bind-template

绑定多个表达式

<div ng-bind-template='{{ name }} is {{ age }} years old'></div>

ng-cloak

在含有模板的元素上使用, 渲染好了就可以显示出来, 避免闪烁

ng-model

双向绑定

ng-show / ng-hide

根据表达式来确定是否显示

ng-click / ng-change / ng-submit

事件

ng-options

用在 <select> 上, 生成 options, 应该可以使用 ng-repeat 来代替

ng-class

• ng-class="foo" 会去取 foo 的值
• ng-class="{ x: true, y: false, z: true }" 取的是值为 true 的 key
• ng-class=[o1, o2, ..., on] 每一个元素应该是一个 string or object

ng-attr-(suffix)

某些元素在 attr="{{ value }}" 的情况下会报错, 这个时候使用前缀, 求值的时候再去新建 attr

// js
$scope.cx = 10;

// template
<svg>
  <circle ng-attr-cx="{{ cx }}"><circle>
</svg>

会生成

<svg>
  <circle cx="10"><circle>
</svg>

[magicdawn]

自定义指令

app.directive('fooBar', function(){
  return {
    restrict: String,
        priority: Number,
        terminal: Boolean,
        template: String or Template Function:function(tElement, tAttrs) (...},
        templateUrl: String,
        replace: Boolean or String,
        scope: Boolean or Object,
        transclude: Boolean,
        controller: String or
        function(scope, element, attrs, transclude, otherInjectables) { ... },
        controllerAs: String,
        require: String,
        link: function(scope, iElement, iAttrs) { ... },
        compile: function(tElement, tAttrs, transclude) {
            return {
                pre: function(scope, iElement, iAttrs, controller) { ... }, 17
                post: function(scope, iElement, iAttrs, controller) { ... }
            }
            // 返回一个对象 or 连接函数
            return function postLink(...) { ... }
      }
    };
});

restrict

• E 元素
• A 属性, 默认值
• C 类名 <div class="my-directive:expression;"></div>
• M 注释 <--directive:my-directive expression-->

priority

优先级, 数字类型, 在同一元素上, 优先级高的先执行. 默认 0, ngRepeat 优先级为 1000

terminal

是否种植比它优先级更低的指令的执行. true or false

template / templateUrl

模板

replace

是否替换.

scope

Boolean | Object

• true 从父级作用域继承并创建一个新的作用域对象
• false 默认
• Object 创建隔离作用域

隔离作用域

如设置 {} 即为隔离作用域, 不能访问外部作用域

scope: {}

绑定策略

• @ 外部作用域 -> 此作用域 单向绑定
• = 内外作用域, 双向绑定
• & 用于方法(function), 直接绑定父级作用域的方法 ?

transclude

默认值 flase, 设置了则必须为 true
Google Translate 查不到, 书上意思为 嵌入

app.directive('fooBar', function(){
    return {
    restrict: 'E',
    transclude: true,
    replace: true,
    template: '<div class="wrap"><div ng-transclude></div></div>'
  }
});

就是将使用中的 children 放到发现 ng-transclude 的地方

controller

String or function

controller: function($scope, $element, $attrs, $transclude){
    // blabla
}

• $scope 与指令相关联的当前作用域
• $element 当前元素
• $attrs 属性
• $transclude transclude链接函数是实际被执行用来克隆元素和操作DOM的函数

$transclude(function(clone) {
    var a = angular.element('<a>');
    a.attr('href', clone.text());
    a.text(clone.text()); 8 $log.info("Created new a tag in link directive");
    $element.append(a);
});

controllerAs

controllerAs 参数用来设置控制器的别名, 可以以此为名来发布控制器

书上将的看不懂...

require

String or string[]

require 会将控制器注入到其值所指定的控制中, 并作为指令的链接函数的 4th 参数

生命周期

compile

compile: function($el, $attr, $transclude){
  return function link($scope, $el, $attr){

  }
}

compile 返回一个 Object | function, compile() 返回的 link 比在外部设置的 link 选项优先级高.

link

link: function($scope, $el, $attrs, require1, require2){

}

前面的 require 会在这里注入

[magicdawn]

ngModel

$setViewValue(string value)

设置作用域中的视图值

• 这个方法更新制控制器本地 $viewValue, 然后将值传递给每一个 $parser 函数
• 调用玩 $parser 后, 值会被赋给 $modalValue, 并且传递给指令中 ng-model 属性提供的表达式
• 最后 $viewChangeListeners 中的监听器都会被调用

单独调用$setViewValue 不会唤起一个新的 $digest 循环, 如果想更新指令, 需要在设置 $viewValue 后手动触发 $digest

ngModelController.props

• $viewValue
• $modalValue
• $parsers
• $formatters
• $viewChangeListeners
• $error
• $pristine 用户是否对控件进行了修改
• $dirty 与 $pristine 相反
• $valid
• $invalid