angularjs 1.3 综合学习 (one way bind , ng-if , ng-switch , ng-messages, ng-form ,ng-model )

主要讲解1.3后的一些新功能，和一些以前没有介绍的小功能 (ng-if,ng-switch).

1.one way bind

　这个之前的版本已经有人自己实现了，但是在1.3之后，angularjs 有自带的了。用法极其简单 .

<div ng-app="app" ng-controller="ctrl">
    {{ ::value }}
</div>
<script src="../../js/Stooges.js"></script>
<script src="../../js/ng-1.3.10/angular.js"></script>
<script>
    var app = angular.module("app", []);
    app.controller("ctrl", ["$scope", "$timeout", function ($scope, $timeout) {
        $scope.value = "keatkeat";
        $timeout(function () {
            $scope.value = "xinyao";
        },2000);
    }]);
</script>

看到吗？只是把从前的 {{ value }} 改成 {{ ::value }} . 加了 :: 就表示这个值只是要单向绑定，之后$scope改变了也不会在同步到模板了。

2.ng-if

　ng-if 是用来做动态模板的，如果你的模板有一部分内容是依据某些数据来决定的就可以用啦。

他和ng-hide主要区别在，ng-if 如果是false 的情况它不会生成dom,这有时对性能是好的。

ng-if 为true时，angularjs 会使用之前clone好的模板，然后compile了append出去。

<div ng-app="app" ng-controller="ctrl">
        <div ng-if="isTrue">
        ok
        </div>
        <div ng-if="!isTrue">
        no
        </div>
</div>
<script src="../../js/Stooges.js"></script>
<script src="../../js/ng-1.3.10/angular.js"></script>
<script>
    var app = angular.module("app", []);
    app.controller("ctrl", ["$scope", "$timeout", function ($scope, $timeout) {        
        $scope.isTrue = false;
        $timeout(function () {
            $scope.isTrue = true;
        }, 2000);
    }]);
</script>

angularjs 没有 else 指令(不过有人自己实现了) , 不过我们可以用上面的写法来模拟 else

ng-if 会自动创建新的继承 scope . 在有ng-model 的情况下多留意，有坑.

<div ng-app="app" ng-controller="ctrl">
    <div ng-form="form">
        parent value : {{value}} 
        <br />
        model value :{{ form.age.$modelValue }}
        <div ng-if="isTrue">
            <input type="text" name="age" ng-model="value" />
            <br />
            child value : {{value}}
        </div>
    </div>
</div>
<script src="../../js/Stooges.js"></script>
<script src="../../js/ng-1.3.10/angular.js"></script>
<script>
    var app = angular.module("app", []);
    app.controller("ctrl", ["$scope", "$timeout", function ($scope, $timeout) { 
        $scope.isTrue = true;
        $scope.value = "keatkeat";         
    }]);
</script>

当我们输入 text 的时候 , $modelValue 和 child value 都会更新，但是 parent value 却不会了。这是正确的原型概念 (http://www.cnblogs.com/keatkeat/p/3983952.html)

一般情况我们在做form 时，通常我们设计一个对象用于装所有的 value ，这样就不必担心继承scope引起的问题了 .

稍微改一下就可以了.

<div ng-app="app" ng-controller="ctrl">
    <div ng-form="form">
        parent value : {{value.age}} 
        <br />
        model value :{{ form.age.$modelValue }}
        <div ng-if="isTrue">
            <input type="text" name="age" ng-model="value.age" />
            <br />
            child value : {{value.age}}
        </div>
    </div>
</div>
<script src="../../js/Stooges.js"></script>
<script src="../../js/ng-1.3.10/angular.js"></script>
<script>
    var app = angular.module("app", []);
    app.controller("ctrl", ["$scope", "$timeout", function ($scope, $timeout) { 
        $scope.isTrue = true;
        $scope.value = { age : 13 }; //换成对象         
    }]);
</script>

View Code

3.ng-switch

这个和 ng-if 差不多，和一般js switch 一样的概念 . 它也是会创建继承scope哦.

    <div ng-app="app" ng-controller="ctrl"> 
        <div ng-switch="switchCase"> 
            <div ng-switch-when="case1">case2</div><!--case1 必须是一个 string, 不可以是表达式 , (case1 != $scope.case1)-->
            <div ng-switch-when="case2">case2</div>
            <div ng-switch-default>default case</div>
        </div>
    </div>
    <script src="../../js/Stooges.js"></script>
    <script src="../../js/ng-1.3.10/angular.js"></script>
    <script>
        var app = angular.module("app", []);
        app.controller("ctrl", ["$scope", "$timeout", function ($scope, $timeout) {         
            $scope.switchCase = "case2";
            $timeout(function () {
                $scope.switchCase = "case1";
            }, 2000);
        }]);
    </script>

4. ng-messages

这个主要用于form 验证错误时的error message.

<div ng-app="app" ng-controller="ctrl">       
    <form novalidate>
        <div ng-form="form">
            <input type="email" ng-minlength="2" required name="email" ng-model="formData.email" />                    
            <div ng-messages="form.email.$error" ng-messages-multiple>
                <div ng-message="required">must fill in email</div>
                <div ng-message="email">no a email format</div>
                <div ng-message="minlength">at least 2 words</div>
            </div>
        </div>
    </form>
</div>
<script src="../../js/Stooges.js"></script>
<script src="../../js/ng-1.3.10/angular.js"></script>
<script src="../../js/ng-1.3.10/angular-messages.js"></script>
<script>
    var app = angular.module("app", ['ngMessages']);
    app.controller("ctrl", ["$scope", "$timeout", function ($scope, $timeout) {
        $scope.formData = {};
    }]);
</script>

注意这是一个而且的模块必须加载 ['ngMessages'] 和引入文件 angular-messages.js

上面是一个能匹配多个错误信息的例子. 当错误出现时，特定的div就会被显示出来了。form.email.$error 是一个这样的对象 : { "email": true, "minlength": true } , true 表示验证失败了.

5. ng-model and ng-form

这2个我之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3912530.html

当时还在1.3 beta , 现在我会把一些常用到的在讲解一篇.还有一些新新特性也一起说说。

首先要强调，如果你想把表单做好，做的很 "angular way" 的话， ng-form , ng-model , 自定义指令, 验证, 都必须很清楚。你把它们连在一起才能强大。

5.1 ngModel.$formatters 和 ngModel.$parsers

这2个东西是 ng-model 在同步数据的时候的 pipeline , ngModel 有2个主要属性 ($viewValue , $modelValue)

顾名思义啦，这2个值通常是一样的。但是有时候我们希望他们不一样，比如日期格式。在 $modelValue 是 datetime , 在 $viewValue 是 string .

这时我们就可以通过拦截 pipeline , 做一些convertion 了.

<div ng-app="app" ng-controller="ctrl">       
    <form novalidate autocomplete="off">
        <div ng-form="form">
            model value : {{ form.name.$modelValue }} , Type : {{ getType(form.name.$modelValue) }} <br />
            view value : {{ form.name.$viewValue }} , Type : {{ getType(form.name.$viewValue) }} <br />
            <input type="text" name="name" ng-model="formData.name" my-datetime-convert /><br />
               
        </div>
    </form>
</div> 
<script src="../../js/ng-1.3.10/angular.js"></script> 
<script>
    var app = angular.module("app", []);  
    app.directive("myDatetimeConvert", [function () {
        return {
            restrict: "A",
            require: "ngModel",
            link: function (scope, elem, attrs, ngModel) {
                ngModel.$formatters.push(function (value) {
                    return value.toDateString(); //把 datetime 各式转换成 string 格式.
                });
                ngModel.$parsers.push(function (value) {
                    try {
                        return new Date(value);
                    } catch (e) {
                        return undefined;
                    }                        
                });
            }
        }
    }]);
    app.controller("ctrl", ["$scope", "$timeout", function ($scope, $timeout) {
        $scope.formData = {
            name : new Date()
        };
        $scope.getType = function (value) {
            return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
        }
    }]);
</script>

上面就是一个处理 datetime 的例子。

$formatters 触发当 model -> view

$parsers 触发当 view -> model

5.2 ng-model-options

ng-model-options="{ updateOn: 'blur' , debounce: 2000 }"

updateOn 表示当什么 event 触发时写入 $viewValue , debounce 表示delay多久后把 $viewValue 同步去 $modelValue

上面这个case , 如果我们写入一个 "keatkeat" , 当onblur 时 $viewValue 马上会是 "keatkeat" , 2秒后 $modelValue 会是 "keatkeat" .

值得注意的是 : 如果我们只是写了一个 debounce , 那么 $viewValue 并不会马上有"keatkeat"，而是 2 秒后 $viewValue 和 $modelValue 同时是 "keatkeat" . 建议不一起使用！

5.3 ng-model 属性方法

方法 :

$render

render中文是渲染，当$modelValue 被修改 $digest 后会同步到 $viewValue (中间经过 pipeline) , 之后angular会调用 $render.

在做自定义指令时，我们就是靠注册这个方法来完成我们 dom 修改的。

在方法中，我们应该使用 $viewValue 工作，而不是 $modelValue 哦。

$rollbackViewValue

调用这个方法，$modeValue 的值将同步到 $viewModel 上

<input type="text" name="name" ng-model="formData.name" ng-model-options="{ updateOn: 'blur' }" ng-keyup="keyup($event,form.name)" />

$scope.keyup = function (event, ngModel) {
    if (event.keyCode == 27) {
        ngModel.$rollbackViewValue();
    }
}

一般上是配合 keyup Esc 和 updateOn : 'blur' 使用

$commitViewValue

这个和 $rollbackViewValue 相反，是马上把 $viewValue 同步到 $modelValue 上。

属性 :

$validators

顾名思义就是做验证的啦，1.3以前我们是通过pipeline来做验证的，很麻烦。

现在呢用 $validators 就可以了

<div ng-app="app" ng-controller="ctrl">
    <form novalidate autocomplete="off">
        <div ng-form="form">
            model value : {{ form.name.$modelValue }}<br />
            view value : {{ form.name.$viewValue }}<br />
            error : {{ form.name.$error | json }}
            <input type="text" name="name" ng-model="formData.name" ng-model-options="{ debounce: 2000 }" my-valid />
            <br />              
        </div>
    </form>
</div>
<script src="../../js/Stooges.js"></script>
<script src="../../js/ng-1.3.10/angular.js"></script>
<script>     
    var app = angular.module("app", []);
    app.directive("myValid", [function () {
        return {
            restrict: "A",
            require: "ngModel",
            link: function (scope, elem, attrCollection, ngModel) {
                ngModel.$validators["myValid"] = function (modelValue, viewValue) {
                    return modelValue == "kknd";                        
                }
            }
        }
    }]);
    app.controller("ctrl", ["$scope", "$timeout", function ($scope, $timeout) {
        $scope.formData = { name: "kknd" }; 
    }]);
</script>

$asyncValidators & $pending

而且还支持异步的

<div ng-app="app" ng-controller="ctrl">
    <form novalidate autocomplete="off">
        <div ng-form="form">
            model value : {{ form.name.$modelValue }}<br />
            view value : {{ form.name.$viewValue }}<br />
            error : {{ form.name.$error | json }} <br />
            pending : {{ form.name.$pending }}
            <input type="text" name="name" ng-model="formData.name" ng-model-options="{ debounce: 1000 }" my-valid />
            <br />              
        </div>
    </form>
</div>
<script src="../../js/Stooges.js"></script>
<script src="../../js/ng-1.3.10/angular.js"></script>
<script>     
    var app = angular.module("app", []);
    app.directive("myValid", ["$q",function ($q) {
        return {
            restrict: "A",
            require: "ngModel",
            link: function (scope, elem, attrCollection, ngModel) {
                ngModel.$asyncValidators["myValid"] = function (modelValue, viewValue) {
                    var defer = $q.defer();
                    log("async valid send");
                    setTimeout(function () {
                        log("async valid back");
                        if (modelValue == "kknd") {
                            defer.resolve(true);
                        }
                        else {
                            defer.reject(false);
                        }                            
                    }, 3000);
                    return defer.promise;                         
                }
            }
        }
    }]);
    app.controller("ctrl", ["$scope", "$timeout", function ($scope, $timeout) {
        $scope.formData = { name: "kknd33" }; 
    }]);
</script>

$pending = { myValid : true } 表示正在验证.

注册到$asyncValidators 中的方法，我们需要返回一个 promise 对象就可以了.

验证如果不通过，$modelValue 将会是 undefined

$setViewValue

这个方法主要是用于自定义指令时，我们通过事件来更新ng model 的值

比如 input text , 就是写一个 keyup event , 当keyup 触发时就会调用 $setViewValue(inputValue);

这个方法会更新 $viewValue , $modelValue , 也会触发 pipeline , validators .

注：此方法不会触发 $digest (官方网站是这样写的啦)

But ! 我自己在1.4.5 版本用好像是会的

如果 value 和之前一样的话，digest 会触发，但是$validate 不会触发

$validate()

这个方法是手动调用验证

注：此方法不会触发 $digest (真的不会哦)

ng-form

有点懒，这个就不怎么介绍了。

只说重点 ,下次才补上吧

<form novalidate autocomplete="off">
    <div ng-form="form">
        model value : {{ form.name.$modelValue }}<br />
        view value : {{ form.name.$viewValue }}<br />
        error : {{ form.name.$error | json }} <br />
        pending : {{ form.name.$pending }}
        <input type="text" name="name" ng-model="formData.name" ng-model-options="{ debounce: 1000 }" my-valid />
        <div ng-click="click(form.name)">ok</div>
        <br />              
    </div>
</form>

angular 的form 支持嵌套 , 我觉得最佳做法就是上面这个样子，最外层写一个 form , 内层全部用 div + ng-form 指令

在form 里面，每一个涉及ng-model 的节点，如果有附带 name 的话，都会直接添加进 form controllers 里面 .

所以上面 form.name 可以访问到 ngModelCtrl

form 有一个 $submitted 属性，可以用于判断是否提交。

要reset 一个form , 除了把ng-model 值 clear 完之外，还必须 $setPristine() 和 $setUntouched();

ng-model 的valid , dirty 等等都会和 form 牵连， form 也会和parent form 牵连 . (这个概念要懂)

好啦，基本上就是这样了，下次我才给一个完整的案例吧 ^^