У меня есть эта редактируемая директива, и она прекрасно работает, за исключением того, что она не будет показывать текст до тех пор, пока у модели не будет данных внутри.
Метод, который я пробовал, заключается в следующем:
{{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();
});
}
};
});
ИЗМЕНИТЬ 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>
содержимое между тегами открытия и закрытия вашей директивы будет полностью заменено шаблоном директивы, если вы не используете tansclusion.
<editable model="option.title">{{option.title || 'Placeholder Text' | Test}}</editable>
-
{{model || 'text before model updates' | filter}}