angularjs,浏览器的记住密码功能,不能使pwd这个文本框自动 watch?

angularjs,浏览器的记住密码功能,不能使pwd这个文本框自动 watch?

浏览器有记住密码的功能,用户名一点,密码自动填写,angularjs不能获取到哦,呵呵,

作者:Guo Jonathan
链接:http://www.zhihu.com/question/24819178/answer/29092074
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

谢邀。这不只是password的问题,而是browser autocomplete的原因。
解决方法可参见 Form model doesn't update on autocomplete · Issue #1460 · angular/angular.js · GitHub 里mingue提供的方法。我按照他的方法创建了一个directive如下:
.directive('browserAutocompelteForm', function() {
            return {
                priority: 10,
                link: function(scope, element, attrs) {
                    element.on('submit', function (ev) {
                        $('input[ng-model]', element).each(function (index, item) {
                            if (angular.element(this).attr('type') !== 'checkbox' && angular.element(this).attr('type') !== 'radio') {
                                angular.element(this).controller('ngModel').$setViewValue($(this).val());
                            }
                        });
                    });
                }
            };
        })
在你的form tag里加上这个directive就可以把autocomplete的值重新赋给这个form里除checkbox和radio的所有inputs.
<form browser-autocomplete-form>
    <!-- inputs -->
    <input type="password" ng-model="pwd">
</form>
可是这只是针对与你提交这个form,由server来handle请求。
如果你在form里使用了ngSubmit, 那就需要使用一点点dirty的手段,除了上面的directive,你需要$timeout module.
因为form 的ngSubmit处理比directive要优先。所以我使用如下代码解决这个问题。
HTML:
<form browser-remember-form on-submit="handleSubmit()">
    <!-- inputs -->
    <input type="password" ng-model="pwd">
</form>
AngularJS controller:
myApp.controller('sampleCtrl', ['$scope', '$timeout', function($scope, $timeout) {
        $timeout(function() {
            //get your input values 获取input值
            var pwd = $scope.pwd;     
        }, 500);
}]);
这个方法比较dirty, 换句话说,非常不严格,但是不出意外可以工作没有问题,设500ms的timeout时间不会太影响体验,但假如某些情况,directive处理时间超出500ms,你可以考虑增高这个值以加强稳定性,但势必会减少一些用户体验了。

希望有帮助,欢迎探讨。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值