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>
当我点击"选中测试"的chk(初始默认为false) 触发check事件和将 $scope.chk变为true的事件.
但是我发现ng-click貌似是在前的,也就是说check(chk)的参数,是chk被点击之前的值,也就是false,
和传统js/jquery不太一样.感觉好别扭,
谁能解释下为什么是这样子的?
最佳答案
1
查看avalon源码可以知道：
ngModel 优先级为1
ngClick 优先级为0
从断点效果来看，也是model先执行的哇。
收获园豆：30
是啊 正常理解是这样,但现在就是
$scope.result = $scope.chk;
$scope.result2 = val;
这两句,可以发现,ngClick 执行的时候,model还没有来得及更新呢
@碎景: 你怎么发现的，我这边是更新了的。angular1.3.8
@幻天芒: 我是1.2.20
你把我的代码复制过去执行看看 是和我一样么?
@幻天芒:
@碎景:
@幻天芒:
明白了,居然真的是版本问题,
这也太扯淡了吧,同样api返回不同结果,这向下兼容做的太烂了.
@碎景: 还有更多的坑，相信你会遇到的，哈哈。angular2.0直接就全新的。。。google的技术不好追啊~对IE的兼容也不好，包括IE11。。
@幻天芒: 我就是听说1.3开始不兼容ie8 我才没选的...
先用着吧,试试水.
今天用underscore和angularJS做了个前端数据筛选后自动绑定的玩意,确实是挺好用的.
@碎景: 考虑下国产的avalon呢？这个和angular挺像的。
