Попытка сделать пользовательскую директиву с Angular 1.4.9, но застряла с функцией ссылки

Question

Попытка сделать пользовательскую директиву с Angular 1.4.9, но застряла с функцией ссылки

0

Прежде всего, это мой плукер: https://plnkr.co/edit/JbG6vlSbeWrBcmYhmhF1?p=preview

Я пытаюсь сделать директиву для добавления плавающей метки, как показано в этом примере, в любое поле ввода.

Например, у меня есть следующее поле ввода:

<input floating-label placeholder="Better field" type="text" class="form-control" ng-model="floatingDirective"/>

floating-label должен работать таким образом, чтобы он расширил его до следующего кода:

<div class="field">
        <label ng-show="betterField" class="show-hide">Better field</label>
        <input  type="text" class="form-control" ng-model="betterField" placeholder="Better field"/>
</div>

И я не могу этого добиться, это моя директива до сих пор:

.directive('floatingLabel', function ($compile) {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                ngModel: '='
            },
            link: function(scope, element, attrs, ctrl, transclude) {
                var wrapper = '<div class="field">' + 
                                '</div>';

                element.after($compile('<label ng-show="' + attrs.ngModel + '" class="show-hide">' + attrs.placeholder + '</label>')(scope));
                element.wrap(wrapper);
            }
        }}
 )

Невозможно понять, как объединить wrap, prepend и append чтобы получить желаемую структуру и как заставить ng-show работать с значением ng-model.

Заранее спасибо.

Anatoly 15 май 2016, в 21:39

Источник

Теги:

jquery

angularjs

angularjs-directive

jqlite

1 ответ

Ещё вопросы

sourdoughdetzel · Answer 1 · 2016-05-15T21-56-00.000Z

Я бы предложил небольшую реструктуризацию, чтобы сделать эту работу plunkr.

Я думаю, что ваша директива должна обрабатывать создание ввода и метки, чтобы вам не пришлось беспокоиться о функции ссылок, и вам лучше контролировать сферу действия. Это будет выглядеть так...

angular.module('baseapp.directives',[])
angular.module('baseapp.directives')
.directive('floatingLabelInput', function (){
        return {
            restrict: 'E',
            scope: {
                ngModel: '=',
                placeholder: '@'
            },
            template: '<div class="field"><input floating-label placeholder="Better field" type="text" class="form-control" ng-model="ngModel"/><label ng-show="ngModel" class="show-hide">{{placeholder}}</label></div>'
        }
}
 )

Тогда в вашем html вы просто сделаете это...

<floating-label-input ng-model="floatingDirective" placeholder="Better field"></floating-label-input>

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