Добавить заполнитель в угловой {{}}

Question

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

Метод, который я попытался это:

{{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(); 
      }); 
     } 
    }; 
}); 

Answer 1

EDIT 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(); 
       }); 
      } 
     }; 
    }); 

EDIT 3

Try:

<editable ng-init="option={title:''};" model="option.title">{{option.title | Test}}</editable> 

Answer 2

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

Answer 3

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

-

{{model || 'text before model updates' | filter}}