Simple Boolean Switch指令无法按预期工作

时间:2014-09-19 22:40:42

标签: angularjs

我创建了一个简单的“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()的情况下执行此操作?

0 个答案:

没有答案