我有以下指令:

.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 />

10-05 21:09
查看更多