表单中的ngModelController

 测试表单中的ngController。直接看红字结论部分即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular-1.5.5/angular.js"></script>
</head>
<body ng-app="app">
<form name="f">
    <input required type="text" name="addr" ng-model="addrModel" xx>
    {{f.addr.x}}
    {{f.addr.$error.required}}
</form>
<script>
    var app = angular.module('app',[]);
    app.directive('xx',function(){
        return {
            require:'ngModel',
            link:function(scope,ele,attr,ctrl){
                ctrl.x = 'custom value';
            }
        }
    })
</script>
</html>

以上两个值能正常显示。得出 f.addr实际上就是addrModel上的ngModelController，继续测试，对以上例子进行改造：

<form name="f">
    <input required type="text" name="addr" ng-model="addrModel">
    <div xx ng-model="addrModel"></div>
    {{f.addr.x}}
    {{f.addr.$error.required}}
</form>

运行结果：只显示一个true，那个custom value就不显示了。那是因为每一个ngModel指令即使关联的是同一个model，ngModelController也是不同的，验证如下：

<body ng-app="app">
<form name="f">
    <div xx ng-model="addrModel"></div>
    <div xx ng-model="addrModel"></div>
</form>
<script>
    var app = angular.module('app',[]);
    app.directive('xx',function(){
        return {
            require:'ngModel',
            link:function(scope,ele,attr,ctrl){
                console.log('get ' + ctrl.x)
                ctrl.x = 123;
            }
        }
    })
</script>

输出两个undefined。得证

 

posted @ 2017-10-08 21:00  HelloHello233  阅读(186)  评论(0)  编辑  收藏  举报