javascript - 如何修改AngularJS中指令后面指定的模型(ng-model值)？

Question

我有以下指令:

.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。在我的帖子方法中我尝试过:$scope.sms = null; 和 $scope.sms = '';$scope.inputValue = null; 和 $scope.inputValue = '';

但是没有任何效果。

Answer 1

你的指令有它自己的作用域(因为你定义了它)，它的作用域与 Controller 作用域(又名 $scope)不同。因此 $scope.inputValue 不会引用 Controller 中的任何内容。

有多种方法可以完成您想做的事情(例如通过附加属性绑定(bind)它)，但我不推荐它。

解决问题的更好方法是在 View 中定义输入及其 ng-model，并且仅将指令作为属性添加到输入中。

查看:

<input ng-model="inputValue" phonenumber-directive />