Question

我有以下指令：

mod.directive('mdCheckbox', function(){
        var link = function(scope, element, attr, ngModel){
        var inp = element.find('input');

        scope.$watch(function(){
            return ngModel.$viewValue;
        }, function(newVal){
            console.log('newVal: ' + newVal);
            if(newVal){
                inp.attr('checked', 'checked');
            }else{
                inp.removeAttr('checked');
            }
        });

        scope.clickT = function(evt){
            // ** why the need for stopPropagation ?
            evt.stopPropagation();
            console.log('click called');
            if(inp.is(':checked')){ 
                ngModel.$setViewValue(false);
                console.log('set to false');
            }else{
                ngModel.$setViewValue(true);
                console.log('set to true');
            }
        };
    };

    var directive = {
        restrict: 'EA',
        require: 'ngModel',
        scope: {
            text: '@mdText'
        },
        template: '<div ng-click="clickT($event)" class="checkbox"><input type="checkbox"/>' +
                    '<span>{{text}}</span></div>',
        replace: true,
        link: link
    };

    return directive;

});

和html：

<md-checkbox md-text="Is Awesome" ng-model="user.isAwesome"></md-checkbox>

现在，clickT处理程序被调用两次，我必须停止传播。但我不清楚为什么会这样。第二个问题是，即使这看似有效，但经过几次点击它就会停止工作 - 价值不会再改变真/假。

Here's用于测试的傻瓜

感谢。

Answer 1

您不应手动更改DOM，因为您可以使用数据绑定。但我不会进入那个问题，因为这不是你问的问题的答案。

示例中的问题是切换选中/取消选中复选框的代码。它不是属性，它是属性（可以是true / false，不包含值）。

checked属性在初始加载后不会更新checked属性。该属性实际上与defaultChecked属性相关。

将其更改为：

if (newVal) {
    inp.prop('checked', true);
} else {
    inp.prop('checked', false);
}

Working Plnkr

此外，您可以删除stopPropagation电话。

Answer 2

添加和删除checked属性的方式有些奇怪。保持简单，只需将输入设置为true或false。

Working Demo

scope.clickT = function(){

                console.log('click called');
                if(inp){ 
                    ngModel.$setViewValue(false);
                    console.log('set to false');
                }else{
                    ngModel.$setViewValue(true);
                    console.log('set to true');
                }
            };

Answer 3

如果您查询ngModel而不是input，则可以使用。

if (ngModel.$viewValue) ...

虽然我不确定这个指令会给你带来什么......

指令点击两次被调用

3 个答案: