为何控制器修改值后,指令模板中的ng-model未更新?
问题分析与解决方案
你遇到的问题本质是AngularJS的脏检查机制对引用类型的监听逻辑导致的:
AngularJS默认使用浅监听(对比对象引用)来检测变化,而Date对象是引用类型。当你调用$scope.searchterm.setHours(...)时,只是修改了这个日期对象内部的属性,对象本身的引用并没有改变,所以Angular的脏检查无法感知到这个变化,哪怕你手动调用$scope.$apply()也没用——因为浅监听只会对比引用是否相同,不会深入检查对象内部的属性变化。
解决方法:创建新的Date对象替换原引用
要让Angular检测到变化,你需要修改$scope.searchterm的引用,也就是创建一个新的Date对象来替换原来的:
$scope.valueee = 1; $scope.press = function(){ // 调用setHours后返回的是时间戳,用它创建新的Date对象 $scope.searchterm = new Date($scope.searchterm.setHours($scope.valueee++, 0, 0, 0)); // 这里不需要手动调用$scope.$apply(),因为ng-click触发的函数已经在Angular的digest循环上下文里了 }
这样修改后,$scope.searchterm的引用发生了变化,Angular的脏检查会立刻检测到这个更新,进而同步更新指令模板中ng-model="term"的视图。
补充说明
另外,你之前手动调用$scope.$apply()其实存在风险——如果当前已经处于Angular的digest循环中,这个调用会抛出$apply already in progress的错误。而通过ng-click触发的press函数本身就处于Angular的上下文,Angular会自动触发digest循环,所以完全不需要手动调用$apply()。
内容的提问来源于stack exchange,提问作者RoHaN
相关产品推荐
相关产品推荐

