我创建了一个简单的“Switch”按钮指令,允许用户使用布尔值打开/关闭开关。出于某种原因,我无法获得指令来更新正确位于ngModel上的布尔模型。
请查看http://jsfiddle.net/nvymLokf/
app.directive('skSwitch', function () {
return {
restrict: 'A',
require: 'ngModel',
scope: {
'ngModel' : '='
},
link: function (scope, elem, attrs) {
console.log(scope.ngModel);
if(scope.ngModel === true && attrs.skSwitch === 'true'){
elem.parent().find('button').removeClass('selected');
elem.addClass('selected');
}else if(scope.ngModel === false && attrs.skSwitch === 'false'){
elem.parent().find('button').removeClass('selected');
elem.addClass('selected');
}
elem.on('click', function (e) {
elem.parent().find('button').removeClass('selected');
elem.addClass('selected');
switch (attrs.skSwitch) {
case 'true':
scope.ngModel = true;
break;
case 'false':
scope.ngModel = false;
break;
default:
scope.ngModel = attrs.skSwitch;
break;
}
scope.$apply(); // HAD TO ADD THIS
});
}
};
});
更新
http://jsfiddle.net/nvymLokf/1/
啊!我知道我在做一些愚蠢的事情......我对Angular并不是太新,所以我以前应该抓住这个。更改scope.$apply()
值后,我需要使用scope.ngModel
。我认为,由于我处于Angular指令中,Angular将继续消化范围。但我的猜测是因为我使用的是隔离范围,我需要使用apply()告诉Angular更新UI。
只是好奇,有没有办法在没有隔离范围且不使用$ apply()的情况下执行此操作?