I have the root page of my application which is a search page. I also have a div that slides in on the page when a button is clicked and within this area I have a favorites list. Everything inside this panel is angular.
The first screen of the panel is article when the url is "#/" and a second screen that contains an Add Favorites form is accessible by the angular route "#/newsearch". All of this works fine. Code is below.
How do I bring focus to a specific input in that Add Favorites form? So in other words when the angular route "#/newsearch" is navigated to, I want the input field with the name of "name" to be the field in focus so that they can just start typing the name of the favorite.
I have read some other stack overflow questions, but nothing stick out as an easy solution for my scenario.
angular module:
/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 = "#/";
});
};
};
angular view:
/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> 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>
angular view:
/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>
