edit-in-place: set ng-class inside directive

This commit is contained in:
Amir Nissim
2014-01-15 16:18:10 +02:00
parent f7d4c285f5
commit 9b6b6a6cd7
3 changed files with 7 additions and 13 deletions

View File

@@ -166,8 +166,8 @@ directives.directive('editInPlace', function () {
template: function(tElement, tAttrs) {
var elType = tAttrs.editor || 'input';
var placeholder = tAttrs.placeholder || 'Click to edit';
return '<span ng-click="editable && edit()" ng-bind="value"></span>' +
'<span ng-click="editable && edit()" ng-show="!value">' + placeholder + '</span>' +
return '<span ng-click="editable && edit()" ng-bind="value" ng-class="{editable: editable}"></span>' +
'<span ng-click="editable && edit()" ng-show="editable && !value" ng-class="{editable: editable}">' + placeholder + '</span>' +
'<{elType} ng-model="value" class="form-control" rows="2"></{elType}>'.replace('{elType}', elType);
},
link: function ($scope, element, attrs) {

View File

@@ -22,11 +22,11 @@ a.navbar-brand {
margin-bottom: 5px;
}
.edit-in-place.editable span {
.edit-in-place span.editable {
cursor: pointer;
}
.edit-in-place.editable span:hover {
.edit-in-place span.editable:hover {
background: #FCFCA2;
}

View File

@@ -4,17 +4,11 @@
<div class="panel-heading">
<h3 class="panel-title">
<p>
<edit-in-place editable="currentUser.canEdit(query)" ignore-blanks='true'
value="query.name"
ng-class="{editable: currentUser.canEdit(query)}"></edit-in-place>
</p>
<edit-in-place editable="currentUser.canEdit(query)" ignore-blanks='true' value="query.name"></edit-in-place>
</p>
</h3>
<p>
<edit-in-place editable="currentUser.canEdit(query)" editor="textarea"
placeholder="No description" ignore-blanks='false'
value="query.description"
ng-class="{editable: currentUser.canEdit(query)}"
class="text-muted"></edit-in-place>
<edit-in-place editable="currentUser.canEdit(query)" editor="textarea" placeholder="No description" ignore-blanks='false' value="query.description" class="text-muted"></edit-in-place>
</p>
</div>
<div class="panel-body">