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