1

Я знаю, что я могу использовать форматтеры и парсер в моей директиве, чтобы преобразовать мои данные, как это:Угловой Директивы: ngModelController пользовательская парсер не называется

//format text going to user (model to view) 
    ngModel.$formatters.push(function(value) { 
    return value.toUpperCase(); 
    }); 

    //format text from the user (view to model) 
    ngModel.$parsers.push(function(value) { 
    return value.toLowerCase(); 
    }); 

Полного примера здесь http://plnkr.co/edit/i59xSdVPMxRkgERhj8RE?p=preview

Но я не могу заставить это работать, когда я использую шаблон внутри моей директивы. Мой пользовательский синтаксический анализатор не называется:

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.data = { name: ''}; 
}); 
app.directive('changecase', function() { 
    return { 
    restrict: 'E', 
    require: 'ngModel', 
    scope: { model: '=ngModel' }, 
    template: '<input type="text" ng-model="model"> {{ model }}', 
    link: function (scope, element, attrs, ctrl) { 

     //format text going to user (model to view) 
     ctrl.$formatters.push(function(value) { 
     return value.toUpperCase(); 
     }); 

     //format text from the user (view to model) 
     ctrl.$parsers.push(function(value) { 
     return value.toLowerCase(); 
     }); 
    } 
    } 
}); 

С помощью этого HTML:

<body ng-controller="MainCtrl"> 
    <changecase ng-model="data.name"></changecase> 
    <pre>model is: {{data.name}}</pre> 
    </body> 

Я предполагаю, что это либо сфера или временная проблема, но я не могу работать его. Может ли кто-нибудь увидеть, что я делаю неправильно?

Не стесняйтесь возиться с Plunker здесь: http://plnkr.co/edit/FZ4UnW8wIhIwRV2jVvfB?p=preview

ответ

2

Проблема у вас есть довольно просто - в вашем примере у вас есть 2 нг-модели, один находится в changecase, другой в input. Вы добавляете форматтер к первому, но вам нужно второе. Поэтому ваша директива должна быть справедливой:

app.directive('changecase', function() { 
    return { 
    restrict: 'E', 
    scope: { model: '=model' }, 
    template: '<input realuppercase type="text" ng-model="model"> {{ model }}', 
    link: function (scope, element, attrs) { 
    } 
    } 
}); 

Просто шаблон, поэтому вы, вероятно, захотите ее удалить. (Я изменил нг-модели к модели, причиной здесь просто нет необходимости в директиве ngModel) И новый realuppercase:

app.directive('realuppercase', function() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ctrl) { 
     ctrl.$formatters.push(function(value) { 
     return value.toUpperCase(); 
     }); 

     ctrl.$parsers.push(function(value) { 
     return value.toLowerCase(); 
     }); 
    } 
    } 
}); 

Вот ваш модифицированный звенеть: http://plnkr.co/edit/UoSFFuCVnbAwerQYHc3o?p=preview (тип в шапках -> модель в нижнем регистре)

+0

Это возможно в одной директиве, чтобы «ngModelController» пришел из шаблона ввода директивы? Я сделал +1 :) –

+0

Вы спрашиваете, можете ли вы получить доступ к ngModelController из родительского элемента? Обычным способом «нет» - вы можете использовать некоторые трюки, но обычно это не стоит. –

+0

Да, я спрашиваю, как получить это от родителя, что будет тогда? просто ради любопытства, я хотел знать ... Спасибо, так или иначе .. :) –

Смежные вопросы