2015年6月4日 星期四

Angularjs:input focus


在設計表單控制項時,會考慮到許多操作動線,而常常會有需求是新增時當input值填妥時按下新增的按鈕之後,正常來說我們的input控制項已經失去焦點,因此為了操作方便,通常會設計成「按下新增後」讓焦點回到input控制項,但是Angularjs預設並沒有這樣的機制,因此我們可以利用自訂標籤的方式來訂定一個focus的標籤,並綁定flag值來控制焦點,以下的範例便是以這個操作情境設計。

一、範例網址: http://plnkr.co/edit/MtLWHR?p=preview

二、原始碼:https://github.com/weihanchen/angular-notes

三、設計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;

        }

    }
})();

views/focus.html

<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>

沒有留言:

張貼留言