AngularJS 从1.2迁移到1.3的变动记录(二)

AngularJS 从1.2迁移到1.3的变动记录(二)

公司升级了AngularJS,被迫要做一个升级分享,那就顺便记录下1.2到1.3的变化吧。先前写了一篇升级过程中项目遇到的变化。这篇主要是记录一些可能大多数人会遇到的改变,以及1.3的新特性。


表达式解析

  1. 我们不能在表达式中使用以.bind,.call,.apply这些关键字命名的函数。例如
<div>{{user.sendInfo.call({}, true)}}</div>

这绝对会抛出异常 2. 在表达式中不能使用Object。例如

scope.foo = { "bar": Object };
scope.$eval('foo["bar"]');

这绝对会抛出解析异常 3. 字符串'f', '0', 'false', 'no', 'n', '[]'不在被当做false来处理。只有false,null, undefined,NaN,0,""被当做false来处理。

参考528be29d

Angular工具函数

  1. angylar.copy:以前copy的时候原型链没有被真正的copy过去,只是用指针引用。现在全部都copy过去了。
  2. angular.tojson:双美元符号$$开头的字段直接被忽略。

参考c054288c

Angular HTML编译器

  1. replace:指令里面的这个配置项将会在下个大发布中删除掉,所以大家从现在开始尽量不要用这个关键字。
  2. attr.$observe:不再返回一个observer函数(ps:用过的人都懂的)。

参考299b220f

Forms, Inputs And NgModel

  1. ng-pattern:给个升级前后的代码对比,大家就知道了 ``` //before $scope.exp = '/abc/i';

    //After $scope.exp = /abc/i; ```

  2. $cancelUpdate():现在被改名成$rollbackViewValue()
  3. checkbox: ng-true-value,ng-false-value里面只能放常量,比如数字或者字符'Y','N'记得字符常量一定要用引号包裹。
  4. ngModelOptions:新的牛逼指令,等下单独讲

Scopes And Digests

$broadcast$emit在事件结束后,会把event.currentScope设置为null,如果要获得相应的scope,那么我们使用event.targetScope来获取。

参考82f45aee

Server Requests ($http, $resource)

主要的变化是删除了$httpProvider的属性responseInterceptors。现在这个拦截器已经不用了,所以我们还是老老实实使用interceptors吧。大家在迁移这个的时候,一定要注意逻辑,因为responseInterceptors返回的东西,在逻辑上很让人捉急,一不小心就会错误,然后让你排查到哭(偶就是干了这种事)。

参考ad4336f9

新特性

好了这是AngularJS给的一些大家最想要的功能。

One-time binding

顾名思义就是只绑定一次,无论最后那个值在scope上怎么变化,那么在界面上永远只呈现第一次的赋值。用法{{::xxx}}(xxx是scope上的一个值)。大家还是看例子one-time-binding

//html 代码
<div ng-controller="EventController">
  <button ng-click="clickMe($event)">Click Me</button>
  <p id="one-time-binding-example">One time binding: {{::name}}</p>
  <p id="normal-binding-example">Normal binding: {{name}}</p>
</div>

//javascript 代码
angular.module('oneTimeBidingExampleApp', []).
controller('EventController', ['$scope', function($scope) {
  var counter = 0;
  var names = ['Igor', 'Misko', 'Chirayu', 'Lucas'];
  /*
   * expose the event object to the scope
   */
  $scope.clickMe = function(clickEvent) {
    $scope.name = names[counter % names.length];
    counter++;
  };
}]);

ngMessages

这个指令用来展示form填写错误时的提示信息。使用方式也是比较简单,看个例子就很容易明白。

<form name="myForm">
  <label>Enter your name:</label>
  <input type="text"
         name="myName"
         ng-model="name"
         ng-minlength="5"
         ng-maxlength="20"
         required />

  <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

  <div ng-messages="myForm.myName.$error" style="color:maroon">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
</form>

ngModelOptions

这东西如果详细讲起来,又是一篇博客。这里就简要的说一下吧,不明白的直接看文档,文档还是说得很详细的。 这个指令的主要功能,是可以让我们定义一系列事件来触发model更新或者延迟model更新,这个指令的一个经典用例是:当我们输入关键字来进行搜索的时候,我们不想让AngularJS马上响应输入框的值的变化,我们希望等到用户输入完成的时候再触发搜索。这个时候我们就可以用到ngModelOptions了。

配置项说明

就讲本人用到的,剩下的几个配置项,没有用过,就不好在这里说。希望有高人把它给补齐了。 1. updateOn:为input绑定model更新事件,有个default的默认事件。可以同时绑定多个事件,用空格隔开。这个属性可以跟debounce配合使用。

备注:由于文档上没有说可以绑定哪些事件,在查看源码的时候发现了一段代码 element.on(modelCtrl.$options.updateOn, function(ev) { modelCtrl.$$debounceViewValueCommit(ev && ev.type); }); 因此可以90%肯定,可以绑定任何跟该元素有关的原生事件。

  1. debounce:没有包含这个属性的input,model会根据updateOn来更新值。如果包含这个属性,那么model就会根据debounce设置的参数来决定什么时候更新model。例如:ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }",default事件在input值变化后延迟500毫秒更新model,blur事件会马上触发model的更新。这个属性也可以单独使用,例如:ng-model-options="{debounce: 1000}"。这表示在input值改变1秒之后改变model的值。

注意事项: 1. 我们可以用$rollbackViewValue来阻止model的变化。它的作用就是input显示的值回滚到上一次的记录。要使用这个东西,必须要为form表单和相应的input设置name属性。 2. 还有一些特性请大家补充了。

收藏 0分享浏览 4626
7年前
跟帖

赞了此话题!

沙发
说几句
广告位 点击查看投放指南

我的收藏