Question

我有这个可编辑的字段。看起来像这样

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

我尝试在{{}}标记中添加占位符。因为目前它只显示用于编辑文本区域的图标。

<editable model="option.title">{{option.title | 'Placeholder here'}}</editable>

这不起作用，显然它不对，有没有添加占位符的方法？

我曾使用ng-init，但我只能使用一个，问题是我有多个{{}}标记。

继承可编辑指令

App.directive('editable', function() {
    return {
        restrict: 'E',
        scope: {model: '='},
        replace: false,
        template:
'<span>'+
    '<input type="text" class="form-control"  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();
            });
        }
    };
});

Answer 1

Edit2 更简洁的方法是将指令修改为：

app.directive('editable', function() {
    return {
        restrict: 'E',
        scope: { model: '=', 
                 placeholder: '@'},
        replace: false,
        template:
'<span>'+
    '<input type="text" class="form-control"  ng-model="model" style="width: 100%; font-size: 18px" ng-show="edit" ng-enter="edit=false"></input>'+
        '<span ng-show="!edit">{{model || placeholder}} <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();
            });
        }
    };
});

然后你可以这样做：

<editable model="option.title" placeholder="This is my placeholder"></editable>

旧

您可以使用：

{{option.title ? option.title : 'Placeholder'}}

或{{option.title || 'Placeholder'}}

如果要为其添加更复杂的逻辑，可以创建过滤器：

app.filter('placeholder', function() {
  return function(input) {
    return input ? input : 'Placeholder';
  };
});

然后你可以这样做：

{{option.title | placeholder}}

以角度添加占位符{{}}

1 个答案: