Question

我是Angular.js的新手，我在使用我的PhoneGap应用的Android部署时遇到了一些问题。在我的index.html的HTML代码中，我有以下内容：

<textfield data="mandantData" model="mandant"></textfield>
<textfield data="nameData" model="name"></textfield>
<passwordfield data="passwordData" model="password"></passwordfield>
<checkboxfield data="checkboxData" model="remember"></checkboxfield>

这些指令充当表单字段的包装器。以下是其中一个已定义指令的示例：

app.directive('textfield', function() {
    return {
        scope : {
            data : '=data',
            model : '=model'
        },
        restrict : 'E',
        templateUrl : 'app/partials/textfield.html'
    };
});

这是我的textfield.html：

<div class="textField">
    <div class="label-wrapper">
        <label for="{{data.fieldName}}">{{data.labelText}}</label>
    </div>
    <div class="field-wrapper">
        <input type="text" id="{{data.fieldName}}"/ ng-model="model">
    </div>
</div>

当我将我的应用部署到Android并打开index.html页面时，它看起来表现得很好。但是，我一直得到这种奇怪的行为：一旦我转到其他页面，然后我回到index.html，表单字段一开始就消失了！奇怪的是，它们似乎很快就会出现;我不确定当我点击屏幕时它们是否出现，或者它们会在几秒钟之后自动出现几个帐篷。无论如何，这种行为是无法忍受的。它不会发生在iOS或Chrome for Windows中。

有没有一种方法可以在每次加载index.html文件时强制Angular刷新浏览器的UI？如果没有，是否有解决此问题的方法？

对于额外的功劳（虽然完全不相关），我可以摆脱每个指令的“模型”属性，并简单地将它放在“数据”数组中吗？我之前尝试过这样做，但似乎没有用。

Answer 1

以下内容非常脏但有效：

$timeout(function() {
    $('#mandant').focus();
    $('#mandant').blur();
}, 10);

点击没有帮助，但聚焦一个字段迫使Android重新绘制所有内容。模糊是可选的，但是可取的。超时不是可选的 - 至少在我的情况下不是 - 因为处理指令需要一些时间，所以$（＆＃39; #mandant＆＃39;）不能立即可用。

哦，顺便说一句，我试图通过将代码上传到网站来重现Android浏览器中的问题，它运行得很好。它只在Cordova / PhoneGap中被打破。

Angular.js：指令字段在Android 4.0.4 + PhoneGap中消失

1 个答案: