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>

我有一個角度應用程序，它通過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 masked輸入應用於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".../>

有更好的解決方案嗎？