使用带有离子切换的指令时，输入字段不可编辑或以某种方式只读

Question

Codepen with the problem

这是我的指令模板：

<ion-toggle class="cw-alerttimebutton" ng-model="targetobject.isEnabled"
            ng-checked="targetobject.isEnabled">
    <input type="text" ng-model="targetobject.time" value="{{targetobject.time}}"> {{ text }}
</ion-toggle>

这是我的应用设置：

app.directive('cwAlertTimeButton', function() {
    return {
        restrict: 'AE',
        replace: false, //toggle already replaces
        templateUrl: 'templates/directives/cwAlertTimeButton.html',
        link: function(scope, elem, attrs) {
            scope.targetobject = scope.$eval(attrs.targetobject);
            scope.text = attrs.text;
        }
    };
});

问题：

<input type="text" ng-model="targetobject.time" value="1980-01-01T11:45:00.000Z" class="ng-pristine ng-untouched ng-valid">

在此处写保护也无法访问。 ion-toggle似乎使用导致问题的类item-toggle。

如果我使用类item-toggle将输入移动到包含元素之外，它将按预期工作。以及当我从其父级删除类item-toggle时。

如何让它在这个构造中运行？

这个想法是让iphone像闹钟一样。例如。离开时间，你点击它，你改变它，你有一个切换启用禁用它。

我只使用输入类型=文本来查看它是否有效，但它没有。

Answer 1

以防有人仍有这个问题。这是由item-toggle生成的类ion-toggle引起的。它添加了一种样式pointer-events:none。

要使其可编辑，请将pointer-events ion-toggle的样式覆盖为pointer-events:all

例如。 <ion-toggle ng-model="onOff" ng-change="onChange()" style="pointer-events:all;">。

当然，如果您愿意，可以将其放在样式表中。 ： - ）