Добавить заполнитель в angular {{}}

0

У меня есть эта редактируемая директива, и она прекрасно работает, за исключением того, что она не будет показывать текст до тех пор, пока у модели не будет данных внутри.

Метод, который я пробовал, заключается в следующем:

{{option.title | Test}}

Я надеялся, что это либо покажет option.title, но это не так.

Вот код HTML:

<editable model="option.title">{{option.title | Test}}</editable>

Могу ли я использовать ng-if?

Вот директива:

App.directive('editable', function() {
    return {
        restrict: 'E',
        scope: {model: '='},
        replace: false,
        template:
'<span>'+
    '<input type="text" ng-model="model" style="width: 100%; font-size: 18px" ng-show="edit" ng-enter="edit=false"></input>'+
        '<span ng-show="!edit">{{model}} <i class="fa fa-pencil" style="font-size:20px;"></i></span>'+
'</span>',
        link: function(scope, element, attrs) {
            scope.edit = false;
            element.bind('click', function() {
                scope.$apply(scope.edit = true);
                element.find('input').focus();
            });
        }
    };
});
Теги:
angularjs-directive

3 ответа

0
Лучший ответ

ИЗМЕНИТЬ 1

Попробуй это:

App.directive('editable', function($compile) {
    return {
        restrict: 'E',
        scope: {model: '='},
        replace: false,
        template:
$compile('<span>'+
    '<input type="text" ng-model="model" style="width: 100%; font-size: 18px" ng-show="edit" ng-enter="edit=false"></input>'+
        '<span ng-show="!edit">{{model}} <i class="fa fa-pencil" style="font-size:20px;"></i></span>'+
'</span>'),
        link: function(scope, element, attrs) {
            scope.edit = false;
            element.bind('click', function() {
                scope.$apply(scope.edit = true);
                element.find('input').focus();
            });
        }
    };
});

EDIT 2

Попробуйте инициализировать переменную как:

App.directive('editable', function($compile) {
        return {
            restrict: 'E',
            scope: {model: '='},
            replace: false,
            template:
    $compile('<span>'+
        '<input type="text" ng-model="model" style="width: 100%; font-size: 18px" ng-show="edit" ng-enter="edit=false"></input>'+
            '<span ng-show="!edit">{{model}} <i class="fa fa-pencil" style="font-size:20px;"></i></span>'+
    '</span>'),
            link: function(scope, element, attrs) {
                scope.edit = false;
                scope.model = '';
                element.bind('click', function() {
                    scope.$apply(scope.edit = true);
                    element.find('input').focus();
                });
            }
        };
    });

ИЗМЕНИТЬ 3

Пытаться:

<editable ng-init="option={title:''};" model="option.title">{{option.title | Test}}</editable>
Поделиться
  • 0
    Это убрало элемент все вместе, редактирование работает отлично, просто тот факт, что {{option.title}} не имеет текста внутри, пока не напечатано
  • 0
    Смотри EDIT 2. Попробуй инициализировать переменную в директиве
Показать ещё 4 комментария
0

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

Поделиться
  • 0
    Нет ..... Это не так, у меня это работает где-то точно, Разница в том, что теги {{}} между редактируемыми тегами имеют содержимое внутри.
0 
<editable model="option.title">{{option.title || 'Placeholder Text' | Test}}</editable>

-

 {{model || 'text before model updates' | filter}}
Поделиться
  • 1
    Пожалуйста, отредактируйте ваш пост, чтобы добавить больше объяснений о том, что делает ваш код и почему он решит проблему. Ответ, который в основном содержит только код (даже если он работает), обычно не помогает ОП понять их проблему.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню