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

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>

我有一个 Angular 应用程序，它通过 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".../>

还有更好的解决方案吗？