2015-10-28 116 views
1

我有這個可編輯字段。看起來像這樣以角度向{{}}添加佔位符

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

使用{{option.title || 'Placeholder here'}}而不是{{option.title | 'Placeholder here'}} –

回答

2

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}} 
+0

你好,我已經嘗試了兩種頂級方法,都沒有工作。現在只需添加app.filter – Tester123

+1

@ Tester123對不起,我沒有深入查看你的指令,我正在爲你準備一個新的代碼片段。 – IggY

+0

非常感謝,爲什麼它不工作! – Tester123