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，如此外部使用時只需要綁定某個開關變數，不需要去控制失去焦點時的事件。

js/directives/directives.js

(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));

                });

            }

        };

    }

})()

js/controllers/focus.js

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