Question

我有我的应用程序的根页面，它是一个搜索页面。当点击一个按钮时，我还有一个在页面上滑动的div，在这个区域内我有一个收藏夹列表。这个面板内的所有东西都是棱角分明的。

当网址为＆＃34;＃/＆＃34;时，面板的第一个屏幕是文章。包含添加收藏夹表单的第二个屏幕可通过角度路径＆＃34;＃/ newsearch＆＃34;访问。所有这一切都很好。代码如下。

如何将焦点转移到“添加收藏夹”表单中的特定输入？所以换句话说，当角度路线＆＃34;＃/ newsearch＆＃34;导航到，我希望输入字段的名称为＆＃34; name＆＃34;成为焦点领域，以便他们可以开始输入收藏夹的名称。

我已经阅读了其他一些堆栈溢出问题，但没有什么能成为我方案的简单解决方案。

角度模块：
的 /ng-modules/render-index.js

angular
    .module("renderIndex", ["ngRoute","ngCookies"])
    .config(config)
    .controller("favoritesController", favoritesController)
    .controller("newFavoriteController", newFavoriteController);

function config($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "/ng-templates/favoritesView.html",
            controller: "favoritesController",
            controllerAs: "vm"
        })
        .when("/newsearch", {
            templateUrl: "/ng-templates/newFavoriteView.html",
            controller: "newFavoriteController",
            controllerAs: "vm"
        })
        .otherwise({ redirectTo: "/" });
};

function favoritesController($http) {
    var vm = this;
    vm.searches = [];
    vm.isBusy = true;

    $http.get("/api/favorites")
        .success(function (result) {
            vm.searches = result;
        })
        .error(function () {
            alert('error/failed');
        })
        .then(function () {
            vm.isBusy = false;
        });
};

function newFavoriteController($http, $window, $cookies) {
    var vm = this;
    vm.newFavorite = {};
    vm.newFavorite.searchString = $cookies.currentSearch;
    vm.newFavorite.userId = $cookies.uId;
    vm.save = function () {
        $http.post("/api/favorites", vm.newFavorite)
            .success(function (result) {
                var newFavorite = result.data;
                //TODO: merge with existing topics
                alert("Thanks for your post");
            })
            .error(function () {
                alert("Your broken, go fix yourself!");
            })
            .then(function () {
                $window.location = "#/";
            });
    };

};

角度视图：
的 /ng-templates/favoritesView.js

<div class="small-8 column"><h3>Favorites {{vm.favorites.length}}</h3></div>
<div class="small-4 column"><a class="tiny button radius" href="#/newsearch"><i class="fi-plus"></i>&nbsp;Add</a></div>
<div class="small-12 column">
    <div class="favContent">
        <div class="search row" data-ng-repeat="s in vm.searches">
            <div class="favName small-10 column"><span data-tooltip aria-haspopup="true" class="has-tip" title="{{s.description}}"><a href="{{s.searchString}}">{{s.name}}</a></span></div>
            <div class="small-2 column"><i class="fi-trash"></i></div>
        </div>
    </div>
</div>

角度视图：
的 /ng-templates/newFavoriteView.js

<div class="small-8 column"><h3>Saving Search</h3></div>
<div class="small-12 column">
    <form name="newFavoriteForm" novalidate ng-submit="vm.save()">
        <input name="userId" type="hidden" ng-model="vm.newFavorite.userId" />
        <input name="searchString" type="hidden" ng-model="vm.newFavorite.searchString" />
        <label for="name">Name</label>
        <input name="name" type="text" ng-model="vm.newFavorite.name"/>
        <label for="description">Description</label>
        <textarea name="description" rows="5" cols="30" ng-model="vm.newFavorite.description"></textarea>
        <input type="submit" class="tiny button radius" value="Save" /> | <a href="#/" class="tiny button radius">Cancel</a>
    </form>
</div>

Answer 1

如果你知道需要关注哪个输入，你可以将其添加到其中一个。

<input type="text" ... autofocus/>

如果您需要根据其他变量更改哪一个获得焦点，那么您可能需要向表单添加一个自定义指令，该指令可以查看表单上的输入，然后添加autofocus属性

将焦点设置在角度模板/路径/表单中的文本输入上

1 个答案: