首页 新闻 搜索 专区 学院

angular 关于checkbox ng-click和ng-model之间的先后顺序问题.

0
悬赏园豆:30 [已解决问题] 解决于 2014-12-26 14:53

学习angularJS中,有个问题感觉很难以理解,

<!DOCTYPE html>
<html ng-app="test">
<head>
    <title>angularJs-checkbox</title>
</head>
<body>
    <div ng-controller="CheckCtrl">
        <label>选中测试<input type="checkbox" ng-model="chk" ng-click="check(chk)" /></label> 
        <label>
           联动测试<input type="checkbox" ng-model="chk2" ng-click="check2(chk2)" />
        </label> 
            <p>model chk is : {{chk}}</p>
            <p>current chk is : {{result}}</p>
            <p>current val is : {{result2}}</p>
</div>
    
    <div >
        传统js测试<input type="checkbox" id="chkTest" value="checkbox1"  onclick="clickTest(this)" />
        <p>current chk is : <b id="txtResult"> </b></p>
    </div>

    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript">
        var test = angular.module('test', []);
        test.controller('CheckCtrl', function($scope) {
            //设置checkbox默认不选中
            $scope.chk = false;
            $scope.chk2 = false;
            $scope.check2 = function (val) {
                $scope.chk = !val;
            };
            $scope.check = function(val) {
                // !val ? alert('选中') : alert('未选中');
                $scope.result = $scope.chk;
                $scope.result2 = val;
                console.log("check is call");
            };
        });

        function clickTest(obj) {
            document.getElementById("txtResult").innerHTML = obj.checked;
        }
    </script>
</body>
</html>
View Code

当我点击"选中测试"的chk(初始默认为false)  触发check事件和将 $scope.chk变为true的事件.

但是我发现ng-click貌似是在前的,也就是说check(chk)的参数,是chk被点击之前的值,也就是false,

和传统js/jquery不太一样.感觉好别扭,

谁能解释下为什么是这样子的?

碎景的主页 碎景 | 初学一级 | 园豆:120
提问于:2014-12-25 23:46
< >
分享
最佳答案
1

查看avalon源码可以知道:

ngModel 优先级为1

ngClick 优先级为0 

从断点效果来看,也是model先执行的哇。

收获园豆:30
幻天芒 | 高人七级 |园豆:36652 | 2014-12-26 09:15

是啊 正常理解是这样,但现在就是

$scope.result = $scope.chk;

$scope.result2 = val;

这两句,可以发现,ngClick 执行的时候,model还没有来得及更新呢

 

碎景 | 园豆:120 (初学一级) | 2014-12-26 09:22

@碎景: 你怎么发现的,我这边是更新了的。angular1.3.8

幻天芒 | 园豆:36652 (高人七级) | 2014-12-26 09:38

@幻天芒: 我是1.2.20

你把我的代码复制过去执行看看 是和我一样么?

碎景 | 园豆:120 (初学一级) | 2014-12-26 10:41

@幻天芒: 

碎景 | 园豆:120 (初学一级) | 2014-12-26 10:43

@碎景: 

幻天芒 | 园豆:36652 (高人七级) | 2014-12-26 12:03

@幻天芒: 

明白了,居然真的是版本问题,

这也太扯淡了吧,同样api返回不同结果,这向下兼容做的太烂了.

碎景 | 园豆:120 (初学一级) | 2014-12-26 14:52

@碎景: 还有更多的坑,相信你会遇到的,哈哈。angular2.0直接就全新的。。。google的技术不好追啊~对IE的兼容也不好,包括IE11。。

幻天芒 | 园豆:36652 (高人七级) | 2014-12-26 18:44

@幻天芒: 我就是听说1.3开始不兼容ie8 我才没选的...

先用着吧,试试水.

今天用underscore和angularJS做了个前端数据筛选后自动绑定的玩意,确实是挺好用的.

碎景 | 园豆:120 (初学一级) | 2014-12-26 20:34

@碎景: 考虑下国产的avalon呢?这个和angular挺像的。

幻天芒 | 园豆:36652 (高人七级) | 2014-12-26 20:39
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册