我遇到了一个非常奇怪的错误。我的视图中有一个复选框,它有一个指令,用于在更改时显示它的值。在FF中,它可以很好地显示正确的值。但在其他浏览器中,如Chrome,它会显示相反的响应,即,如果选中,则应显示“true”,但显示“false”!
在我看来:
<input type="checkbox" id="accept" name="accept" ng-model="accept" d6 />
我的指示:
validation.directive('d6', ['$parse', function($parse){
return {
require: 'ngModel',
restrict: 'A',
link: function link(scope, elem, attrs, control) {
elem.on('change', function(){
console.log(control.$modelValue);
});
}
}
}]);
答案 0 :(得分:2)
这样做的角色方法是使用$watch
:
var myApp = angular.module('myApp',[]);
myApp.directive('d6', function(){
return {
require: 'ngModel',
restrict: 'A',
link: function link(scope, elem, attrs, ngModel) {
scope.$watch(
function () {
return ngModel.$modelValue;
}, function(newValue) {
console.log(newValue);
}
);
}
}
});
有工作JSFiddle。
答案 1 :(得分:2)
角度代码
在用于所有输入的checkboxInputType
函数的角度代码中找到[type = checkbox]并带有ngModelController
:
element.on('click', function() {
scope.$apply(function() {
ctrl.$setViewValue(element[0].checked);
});
});
此代码使用布尔值作为视图值更新ngModelController
,立即通过管道输入提供的解析器,从而设置模型值。
点击并更改活动
您正在收听change
事件,该事件在Chrome中的click
事件之前触发,而在Firefox中则相反。这就是整个问题。
<强>解决方案
jQuery解决方案也是收听click
事件。
Angular解决方案是直接观察模型值。
答案 2 :(得分:1)
这两个答案都说了什么,或者你可以简单地观察$ scope.accept(这是你的模型)中的变化:
$scope.$watch('accept', function(){
$scope.value = $scope.accept;
});
在此处查看:http://jsfiddle.net/A8Vgk/307/。这种方式对我来说似乎是最自然的。