具有replace true的Angularjs指令需要返回值

Question

我有一种情况，我需要使用angularjs通过获取单个文本字段并将其转换为下拉列表和另一个文本字段来修改表单。页面后面的代码将查找原始文本字段，因此我需要将数据反馈回原始文本字段。

更改原始表单会很困难。我无法触及它背后的代码。就后端而言，这需要采用相同的形式。

我试图通过将以下angularjs指令附加到原始文本字段来完成此操作。就目前而言，一切似乎都运转得很好......直到我提交表格。提交表单后，原始文本字段将再次变为空。

如何将数据正确地返回到正在替换的原始字段？

function debug(x){ try { console.log(x); } catch (x) {} }

angular.module('app',['ngCookies','ngResource','ui'])
.directive('opsDirectChoice', function(){
    return {
        'restrict'    :    'A',
        'require'     :    'ngModel',
        'scope'       :    true,
        'template'    :    '<span>' + 
                            '<select style="font-size:11px" ng-model="choose_phoneLoc">' + 
                                '<option value="NY">New York</option>' + 
                                '<option value="SF">San Francisco</option>' + 
                            '</select>' + 
                            '<input type="text" ng-model="number_phoneLoc" value="">' +
                            '</span>',
        'replace'    :    true,
        'link'        :    function($scope, elem, attrs, ctrl){    
            phoneFilter = function(phoneIn){
                var phoneOut = phoneIn.replace(/[^0-9]+/g, '');

                if( phoneOut.length > 7 ){
                    phoneOut = phoneOut.substring(0,3) + '-' + phoneOut.substring(3,6) + '-' + phoneOut.substring(6,10);
                }else if( phoneOut.length > 3 ){
                    phoneOut = phoneOut.substring(0,3) + '-' + phoneOut.substring(3,7);
                }

                return phoneOut;
            };

            /*
            $scope.$watch(attrs.ngModel, function (newValue, oldValue) {
                debug(' ng Model is changed: ' + oldValue + ' => ' + newValue);
                if( newValue != oldValue ){
                    if( newValue.substring(0, 1) == 'D' ){
                        $scope.choose_phoneLoc = 'D';
                    }else{
                        $scope.choose_phoneLoc = 'OPS';
                    }

                    debug('ngmodel:  setting number_phoneLoc to phoneFilter(newValue): ' + phoneFilter(newValue));

                    $scope.number_phoneLoc = phoneFilter(newValue);
                }
            });
            */

            $scope.$watch('choose_phoneLoc', function(newValue, oldValue){
                if( newValue != oldValue ){
                    if( newValue ){
                        setViewValue();
                    }
                }
            });

            $scope.$watch('number_phoneLoc', function(newValue, oldValue){
                if( newValue != oldValue ){
                    $scope.number_phoneLoc = $scope.choose_phoneLoc + '\t' + phoneFilter(newValue);

                    setViewValue();
                }
            });

            function setViewValue(){
                var temp = phoneFilter($scope.number_phoneLoc);

                debug('Setting OPS to: ' + $scope.choose_phoneLoc + ' ' + temp);

                //  attrs.ngModel = $scope.choose_phoneLoc + '\t' + temp;
                ctrl.$setViewValue($scope.choose_phoneLoc + '\t' + temp );
                // ctrl.$render();
            }

            $scope.choose_phoneLoc = 'NY';
            $scope.number_phoneLoc = phoneFilter(attrs.ngModel);

        }
    };
})