Angular指令重新獲得關注

Question

我有一個簡單的TODO應用程序（來自Apress的書，Pro Angular）。 目前我有一個小應用程序，用戶在框中鍵入一些信息，點擊一個按鈕，一個TODO任務彈出到屏幕上。 我想要發生的是在用戶點擊按鈕將任務添加到頁面后，焦點再次轉到輸入文本框。 我目前的工作原理，但我希望將其作為指令，以便我可以重復使用它。

JS

 var model = {
            user: "Adam"
        }
        var todoApp = angular.module('todoApp',[]);
        //get data
        todoApp.run(function($http){
            $http.get('todo.json').success(function(data){
                model.items = data;
            });
        });
        //need a directive that can listen for a button click
        todoApp.directive('refocus',function(){
            return {
                restrict: 'a',
                link: function(scope, elem, attrs){
                    scope.$watch('someEvent',function(){
                        //how to listen for a specific click event
                        //and return focus to the input element afterwards
                    })
                }
            }
        })
        todoApp.filter('checkedItems',function(){
            return function(items,showComplete){
                var resultArr=[];
                angular.forEach(items,function(item){
                    if(item.done==false || showComplete ==true){
                        resultArr.push(item);
                    }

                })
                return resultArr;
            }
        })
        todoApp.controller('ToDoCtrl',function($scope){
            $scope.todo = model;
            $scope.incompleteCount = function(){
                var count =0;
                angular.forEach($scope.todo.items,function(item){
                    if(!item.done){
                        count++;
                    }
                });
                return count;
            }

            $scope.addNewItem = function(actionText){
                $scope.todo.items.push({action: actionText, done: false});
                $scope.actionText = "";
                $scope.returnFocus('#getFocus');

            };
            $scope.returnFocus = function(elem){
                $(elem).focus();
            };
        });

HTML

<body ng-controller="ToDoCtrl">
<div class="page-header">
    <h1>
        {{todo.user}}'s To Do List
<span class="label label-default">

</span>
    </h1>
</div>
<div class="panel">
    <div class="input-group">
        <input id="getFocus" ng-model="actionText" class="form-control" ng-focus="" />
<span class="input-group-btn">
<button ng-click="addNewItem(actionText)" class="btn btn-default">Add</button>
</span>
    </div>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>Description</th>
            <th>Done</th>
        </tr>
        </thead>
        <tbody>

            <tr ng-repeat="item in todo.items | checkedItems: showComplete | orderBy:'done'">
                <td>{{item.action}}</td>
                <td><input type="checkbox" ng-model="item.done"/></td>
            </tr>
        </tbody>
    </table>
    <div class="checkbox-inline">
        <label><input type="checkbox" ng-model="showComplete">Show complete</label>
    </div>
</div>
</body>

您可以在addNewItem函數中看到我使用jQuery選擇器將焦點返回到輸入文本，但這並不能使其可重用。 如何完成我的stubped指令以使這種行為可重用？

Answer 1

有幾個模塊可以做到這一點。 （無恥的插頭！）這是一個：角度焦點

我的方法是通過使用事件。 這很簡單直接。 這是實施模塊的小提琴。

快速查看我更改的行：

首先將模塊添加到您的應用程序：

var todoApp = angular.module('todoApp',['kf.focusOn']);

然后我們通過添加focus-on和event="todoAdded"屬性來使用它。 因此，當觸發todoAdded事件時，該元素將被聚焦。

<input ng-model="actionText" class="form-control" focus-on event="todoAdded" />

現在在控制器中我們所要做的就是$scope.$broadcast('todoAdded')以觸發todoAdded事件。 看起來像：

$scope.addNewItem = function(actionText){
    $scope.$broadcast('todoAdded'); // this fires an event.
    $scope.todo.items.push({action: actionText, done: false});
    $scope.actionText = "";
};

現在讓我們來看看模塊的工作原理：

angular.module('kf.focusOn', [])

.directive('focusOn', [function() {
    return {
        restrict: 'A', // Restrict to attribute only
        scope: {
            event: '@' // Accept an event attribute.
        },
        link: function($scope, elem) {
            $scope.$on($scope.event, function() { // On the event passed by $scope.event...
                elem[0].focus(); // Focus on the element.
            });
        }
    }
}]);

你可以看到它沒什么特別的，超級簡單，它接受一個event范圍，只是在觸發事件時將焦點應用於元素。

Angular指令重新獲得關注

問題描述

1 個解決方案

解決方案1
2 2014-08-16 13:43:07

Angular指令重新獲得關注

問題描述

1 個解決方案

解決方案1 2 2014-08-16 13:43:07

解決方案1
2 2014-08-16 13:43:07