ng-maxlength screws up my model

ng-maxlength screws up my model

(https://stackoverflow.com/questions/17075969/ng-maxlength-screws-up-my-model)

I’m trying to do a simple textarea with “so many chars remaining” along with validation. when I use ng-maxlength to validate my form, it resets my charcount as soon as the length hits the max length. Here’s the plunkr Any workarounds?

1
2
3
4
5
6
7
<body ng-controller="MainCtrl">
   <div ng-form="noteForm">
     <textarea ng-maxlength="15" ng-model="result"></textarea>
     <p>{{15 - result.length}} chars remaining</p>
     <button ng-disabled="!noteForm.$valid">Submit</button>
   </div>
 </body>

Funny thing, but for me (using Angular 1.4.7 + TypeScript 1.8.7) usage of HTML attribute “maxLength” had same effect as for mentioned here “ng-maxLength”: after setting some big value (bigger than defined limit) directly into model, value in model becomes undefined. From my point of view, this is Angular bug (just like user3232182 mentioned above). Probably even not linked to ng-maxLength directve, but to the whole binding mechanism. – bkg Apr 20 ‘16 at 7:13

When your textarea exceeds 15 characters, result becomes undefined — that’s just how the ng-min/maxlength directives work. I think you’ll have to write your own directive. Here is a directive that will block input after 15 characters:

1
<textarea my-maxlength="15" ng-model="result"></textarea>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
app.directive('myMaxlength', function() {
  return {
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {
      var maxlength = Number(attrs.myMaxlength);
      function fromUser(text) {
          if (text.length > maxlength) {
            var transformedInput = text.substring(0, maxlength);
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
            return transformedInput;
          } 
          return text;
      }
      ngModelCtrl.$parsers.push(fromUser);
    }
  }; 
});

When your textarea exceeds 15 characters, result becomes undefined — that’s just how the ng-min/maxlength directives work. I think you’ll have to write your own directive. Here is a directive that will block input after 15 characters:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<textarea my-maxlength="15" ng-model="result"></textarea>
app.directive('myMaxlength', function() {
  return {
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {
      var maxlength = Number(attrs.myMaxlength);
      function fromUser(text) {
          if (text.length > maxlength) {
            var transformedInput = text.substring(0, maxlength);
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
            return transformedInput;
          } 
          return text;
      }
      ngModelCtrl.$parsers.push(fromUser);
    }
  }; 
});

Update: to allow more than 15 characters, but disable the submit button when the count exceeds 15:

1
2
3
4
5
6
7
8
link: function (scope, element, attrs, ngModelCtrl) {
  var maxlength = Number(attrs.myMaxlength);
  function fromUser(text) {
      ngModelCtrl.$setValidity('unique', text.length <= maxlength);
      return text;
  }
  ngModelCtrl.$parsers.push(fromUser);
}

As the doc says, the $validate function set model to undefined when validity changes to invalid.

But, we can still prevent this behavior simply by adding allowInvalid: true to the ng-model-options.

So, just modify your code like:

1
2
3
4
5
6
7
8
<body ng-controller="MainCtrl">
    <div ng-form="noteForm">
        <textarea ng-maxlength="15" ng-model="result" 
            ng-model-options="{ allowInvalid: true }"></textarea>
        <p>{{15 - result.length}} chars remaining</p>
        <button ng-disabled="!noteForm.$valid">Submit</button>
    </div>
</body>

TypeScript 和 JavaScript

为什么有了JavaScript，还要有TypeScript

在开发 JavaScript 时，JavaScript 开发团队将 JavaScript 作为客户端编程语言引入。

开发此脚本期初的想法是使其成为一种互补的脚本语言，就像 Visual Basic 与Microsoft 语言系列中的C++一样。然而，JavaScript 并不是为大型复杂应用程序而设计的。它是为具有几百行代码的应用程序而开发的！

随着人们使用 JavaScript，开发人员也意识到 JavaScript 可以用作服务器端编程语言。然而，随着 JavaScript 的发展，JavaScript 代码变得复杂而繁重。因此，JavaScript 甚至无法满足面向对象编程语言的要求。这阻止了 JavaScript 作为服务器端技术在企业级别上取得成功。因此，开发团队创建了 TypeScript来弥补这一差距。

JavaScript 的特点

  • 跨平台
  • 可用于客户端和服务器端编程
  • 很容易学习和入梦
  • 动态语言：非常灵活

TypeScript 的历史

让我们看看 TypeScript 历史上的重要里程碑：

TypeScript于 2012 年首次公开

经过两年在微软的内部开发。TypeScript 0.9，2013 年发布

在 Build 2014 中发布了对泛型 TypeScript 1.0 的额外支持

2014 年 7 月，一个新的 TypeScript 编译器问世，它比以前的版本快五倍

2015 年 7 月，支持 ES6 模块，命名空间关键字，for，of 支持，装饰器

2016 年 11 月，新增功能，如键和查找类型映射类型

2018 年 3 月 27 日，Typescript 中添加了条件类型，改进的带有交集类型的键支持。

TypeScript的特点：

  • 可维护性
  • 为开发人员提供了极大的生产力
  • 代码导航和错误预防
  • 代码“可发现性”和重构
  • 可选的静态类型注释/静态类型
  • 函数的附加特性
  • 支持 ES6
  • 支持接口、子接口、类和子类
  • 可扩展的 HTML5 客户端开发
  • 具有自动完成和代码导航功能的丰富 IDE。
  • 基于类的面向对象，继承私有成员和接口。

TypeScript 代码被转换为纯 JavaScript 代码： TypeScript 代码不能被浏览器本地解释。因此，如果代码是用 TypeScript 编写的，它会被编译并转换为 JavaScript。这个过程被称为Trans-piled。在 JavaScript 代码的帮助下，浏览器能够读取并显示代码。

JavaScript 是 TypeScript ：任何用 JavaScript 编写的代码都可以通过将扩展名从.js更改为.ts来转换为 TypeScript 。
在任何地方使用 TypeScript：可以编译 TypeScript 以在任何浏览器、设备或操作系统上运行。TypeScript 并不特定于任何单一环境。

TypeScript 支持 JS 库：使用 TypeScript，开发人员可以使用现有的 JavaScript 代码，合并流行的 JavaScript 库，或从原生 JavaScript 代码调用 TS 代码。

TypeScript 和 JavaScript 的区别：

  • TypeScript 被称为面向对象的编程语言，而 JavaScript 是基于原型的语言。
  • TypeScript 具有称为静态类型的功能，但 JavaScript 不支持此功能。
  • TypeScript 支持接口，但 JavaScript 不支持。
  • 使用 TypeScript 优于 JavaScript 的优势
  • TypeScript 总是在开发时（预编译）指出编译错误。因此，发生运行时错误的可能性较小，而 JavaScript 是一种解释性语言。
  • TypeScript 支持静态/强类型。这意味着可以在编译时检查类型正确性。此功能在 JavaScript 中不可用。
  • TypeScript 只不过是 JavaScript 和一些附加功能，即 ES6 功能。你的目标浏览器可能不支持它，但 TypeScript 编译器也可以将.ts文件编译成 ES3、ES4 和 ES5。

JavaScript VS TypeScript：哪个更好

在这篇 JavaScript 和 TypeScript 区别教程的最后，可以说，如果有经验的开发人员正在从事相对较小的编码项目，那么 JavaScript 是理想的选择。但是，如果是专业知识和经验丰富的开发团队，那么 Typescript 是最首选的选择。

使用 TypeScript 的缺点

通常，TypeScript 需要时间来编译代码。

AMD和CMD规范

目前，通行的JavaScript模块规范主要有两种：CommonJS和AMD

CommonJS

我们先从CommonJS谈起，因为在网页端没有模块化编程只是页面JavaScript逻辑复杂，但也可以工作下去，在服务器端却一定要有模块，所以虽然JavaScript在web端发展这么多年，第一个流行的模块化规范却由服务器端的JavaScript应用带来，CommonJS规范是由NodeJS发扬光大，这标志着JavaScript模块化编程正式登上舞台。

1、定义模块
根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性

2、模块输出：
模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象

3、加载模块：
加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象

看个例子

//模块定义 myModel.js

var name = 'Byron';

function printName(){
        console.log(name);
}

function printFullName(firstName){
        console.log(firstName + name);
}

module.exports = {
        printName: printName,
        printFullName: printFullName
}

//加载模块

var nameModule = require('./myModel.js');

nameModule.printName();

不同的实现对require时的路径有不同要求，一般情况可以省略js拓展名，可以使用相对路径，也可以使用绝对路径，甚至可以省略路径直接使用模块名（前提是该模块是系统内置模块）

尴尬的浏览器

仔细看上面的代码，会发现require是同步的。模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。

这在服务器端实现很简单，也很自然，然而， 想在浏览器端实现问题却很多。

浏览器端，加载JavaScript最佳、最容易的方式是在document中插入script 标签。但脚本标签天生异步，传统CommonJS模块在浏览器环境中无法正常加载。

解决思路之一是，开发一个服务器端组件，对模块代码作静态分析，将模块与它的依赖列表一起返回给浏览器端。 这很好使，但需要服务器安装额外的组件，并因此要调整一系列底层架构。

另一种解决思路是，用一套标准模板来封装模块定义，但是对于模块应该怎么定义和怎么加载，又产生的分歧：

AMD

AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范

由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出

requireJS主要解决两个问题

1、多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
2、js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长
看一个使用requireJS的例子

// 定义模块 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加载模块
require(['myModule'], function (my){
　 my.printName();
});

语法

requireJS定义了一个函数 define，它是全局变量，用来定义模块

define(id?, dependencies?, factory);

id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）

dependencies：是一个当前模块依赖的模块名称数组

factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值

在页面上使用require函数加载模块

require([dependencies], function(){}); 
require()函数接受两个参数

第一个参数是一个数组，表示所依赖的模块
第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块**

require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

CMD

CMD 即Common Module Definition通用模块定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS一样，只不过在模块定义方式和模块加载（可以说运行、解析）时机上有所不同
语法
Sea.js 推崇一个模块一个文件，遵循统一的写法 

define(id?, deps?, factory)

因为CMD推崇

一个文件一个模块，所以经常就用文件名作为模块id
CMD推崇依赖就近，所以一般不在define的参数中写依赖，在factory中写
factory是一个函数，有三个参数，function(require, exports, module)

require 是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口：require(id)
exports 是一个对象，用来向外提供模块接口
module 是一个对象，上面存储了与当前模块相关联的一些属性和方法
看个例子：

    // 定义模块  myModule.js
    define(function(require, exports, module) {
        var $ = require('jquery.js')
        $('div').addClass('active');
    });

    // 加载模块
    seajs.use(['myModule.js'], function(my){

});

AMD与CMD区别

关于这两个的区别网上可以搜出一堆文章，简单总结一下

最明显的区别就是在模块定义时对依赖的处理不同

1、AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块

2、CMD推崇就近依赖，只有在用到某个模块的时候再去require
这种区别各有优劣，只是语法上的差距，而且requireJS和SeaJS都支持对方的写法

AMD和CMD最大的区别是对依赖模块的执行时机处理不同，注意不是加载的时机或者方式不同

很多人说requireJS是异步加载模块，SeaJS是同步加载模块，这么理解实际上是不准确的，其实加载模块都是异步的，只不过AMD依赖前置，js可以方便知道依赖模块是谁，立即加载，而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略

为什么我们说两个的区别是依赖模块执行时机不同，为什么很多人认为ADM是异步的，CMD是同步的（除了名字的原因。。。）

同样都是异步加载模块，AMD在加载模块完成后就会执行改模块，所有模块都加载执行完后会进入

require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行

CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的

这也是很多人说AMD用户体验好，因为没有延迟，依赖模块提前执行了，CMD性能好，因为只有用户需要的时候才执行的原因