在設計表單控制項時，會考慮到許多操作動線，而常常會有需求是新增時當input值填妥時按下新增的按鈕之後，正常來說我們的input控制項已經失去焦點，因此為了操作方便，通常會設計成「按下新增後」讓焦點回到input控制項，但是Angularjs預設並沒有這樣的機制，因此我們可以利用自訂標籤的方式來訂定一個focus的標籤，並綁定flag值來控制焦點，以下的範例便是以這個操作情境設計。
三、設計foucs標籤，這裡的流程主要是利用$parse來取得表達式的值，但這裡的model是一個函數，可以調用表達式的值，然而我們去監測這個model，當發生變化時其值又為true則進行焦點轉移，最後我們綁定blur失去焦點的事件，並使用model將其值改變為false，如此外部使用時只需要綁定某個開關變數，不需要去控制失去焦點時的事件。
(function(){
angular.module('notes')
.directive('focus',focus)
function focus($parse,$timeout){
return {
link: function(scope, element, attrs) {
var model = $parse(attrs.focus);
scope.$watch(model, function(value) {
if(value === true) {
$timeout(function() {
element[0].focus();
});
}
});
element.bind('blur', function() {
scope.$apply(model.assign(scope, false));
});
}
};
}
})()
'use strict';
(function() {
angular.module('notes')
.controller('focusController', [focusController])
function focusController() {
var self = this;
self.add = add;
self.inputFocus = true;
self.items = [
{ "title": "旅遊" }
]
self.unfocus = unfocus;
self.value = "";
function add(title) {
self.inputFocus = true;
if (angular.isUndefined(title) || title.length <= 0) return;
var item = { "title": title };
self.items.push(item);
self.value = "";
}
function unfocus() {
self.inputFocus = false;
}
}
})();
<form class="form-inline">
<div class="form-group">
<label>清單名稱：</label>
<input type="text" class="form-control" ng-model="focusCtrl.value" placeholder="請輸入清單名稱..." focus="focusCtrl.inputFocus">
</div>
<button type="submit" class="btn btn-default" ng-click="focusCtrl.add(focusCtrl.value)">add</button>
<button type="button" class="btn btn-default" ng-click="focusCtrl.unfocus()">unfocus</button>
</form>
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in focusCtrl.items">{{item.title}}</li>
</ul>
留言
張貼留言