我有以下指令:
.directive('phonenumberDirective', ['$filter', function($filter) {
function link(scope, element, attributes) {
scope.inputValue = scope.phonenumberModel;
scope.$watch('inputValue', function(value, oldValue) {
value = String(value);
var number = value.replace(/[^0-9]+/g, '');
scope.phonenumberModel = number;
scope.inputValue = $filter('phonenumber')(number);
});
}
return {
link: link,
restrict: 'E',
scope: {
phonenumberPlaceholder: '=placeholder',
phonenumberModel: '=model',
change: '=change',
},
template: '<input ng-model="inputValue" type="tel" class="form-control" placeholder="{{phonenumberPlaceholder}}" title="Informe seu celular">',
};
}])
.filter('phonenumber', function() {
return function (number) {
if (!number) { return ''; }
number = String(number);
var formattedNumber = number;
var c = '';
if (number.length <= 10){
var area = number.substring(0,2);
var front = number.substring(2, 6);
var end = number.substring(6, 11);
} else {
var area = number.substring(0,2);
var front = number.substring(2, 7);
var end = number.substring(7, 11);
}
if (front) {
formattedNumber = (c + "(" + area + ") " + front);
}
if (end) {
formattedNumber += ("-" + end);
}
return formattedNumber;
};
});
// And I have my call for this directive as:
<phonenumber-directive placeholder="phone_placeholder" ng-show="show_phone" model="sms" change="updateContact(sms)"></phonenumber-directive>
一切都按预期进行,除了我无法清除指令
value
。在我的post方法中,我尝试过:
$scope.sms = null;
和$scope.sms = '';
$scope.inputValue = null;
和$scope.inputValue = '';
但是没有任何效果。
最佳答案
您的指令具有自己的范围(因为已定义),它的范围不同于控制器的范围(也称为$ scope)。因此,$ scope.inputValue不会引用控制器中的任何内容。
有多种方法可以做您想做的事情(例如,通过aditional属性将其绑定),但是我不建议这样做。
解决问题的一种更好的方法是在视图中定义输入及其ng-model,然后仅将指令作为属性添加到输入中。
视图:
<input ng-model="inputValue" phonenumber-directive />