Question

我正在使用一个名为jquery masked input的插件。 http://digitalbush.com/projects/masked-input-plugin/ 用于屏蔽cell phone和ssn的内容如下：

<script type="text/javascript">
    $('.mask-ssn').mask('999-99-9999');
    $('.mask-phone').mask("(999) 999-9999");
</script>

我有一个角度应用，通过ng-include

加载表单

<div class="myForm" data-ng-include="'/templates/_form.html'"></div>

_form.html的简化内容如下：

<div class="form-group">
    <input 
        class="form-control mask-phone" 
        type="text" 
        placeholder="Cell Phone" 
        name="cell_phone" 
        required 
        data-ng-pattern="user.phone_number_regex"
        data-ng-model="user.formData.cell_phone"/>
    <div class="help-block">...</div>
</div>

如果我只是在父页面中粘贴了_form.html内容，那么一切都会正常工作，并且jquery蒙版输入会应用于html。

不幸的是，因为现在异步加载_form.html，jquery蒙版输入插件不起作用。

寻找关于 *最佳实践/见解* 方法的一些建议，以便将掩码应用于html。不知道是否要将$ scope注入我的角度控制器，然后使用$ scope.apply。或者通过创建指令/或替代解决方案？

Answer 1

这是因为ng-include创建了一个新的子范围。您可以尝试像这样添加$ parent：

<div class="form-group">
    <input 
        class="form-control mask-phone" 
        type="text" 
        placeholder="Cell Phone" 
        name="cell_phone" 
        required 
        data-ng-pattern="$parent.user.phone_number_regex" //add $parent.
        data-ng-model="$parent.user.formData.cell_phone"/> // the same here.
    <div class="help-block">...</div>
</div>

Answer 2

通过在指令

中包装jquery蒙板输入来解决问题

app.directive('mask', function(){
    return {
        restrict: 'A',
        link: function (scope, elem, attr, ctrl) {

            if (attr.mask)
                elem.mask(attr.mask, { placeholder: attr.maskPlaceholder });
        }
    };
});

然后在SSN和单元格

的html元素上

<input class="form-control" data-mask="(999) 999-9999" type="text".../>
<input class="form-control" data-mask="999-99-9999" type="text".../>

那里有更好的解决方案吗？

AngularJS在ng-include html模板之后应用jquery

2 个答案: