Currently working on a small search application using AngularJS and Elasticsearch. I am in the process of transitioning the app from using $scope to controller As syntax. I have implemented UI Router for managing routes/states. I have been attempting to use
controller: 'HomeCtrl',
controllerAs: 'home'
in my state declarations, and then using var vm = this; in the controller to bind to the scope.
I changed ng-model="searchTerms" on my search input to ng-model="home.searchTerms" and updated all necessary bindings. However, none of it seems to be functioning correctly?
Should I instead use ng-controller="HomeCtrl as home" in a parent div? Is this considered best practice? Will it work smoothly with UI Router?
UPDATE I have now added
var vm = this;
vm.searchTerms = searchTerms;
But despite these changes, I am still encountering an error in the Chrome console:
Uncaught ReferenceError: searchTerms is not defined(…)
UPDATED CONTROLLER
'use strict';
angular.module("searchApp.autocomplete", [])
.controller('HomeCtrl', ['$sce', '$state', '$stateParams', 'searchService', function($sce, $state, $stateParams, searchService) {
var vm = this;
var searchTerms = searchTerms;
vm.searchTerms = searchTerms;
vm.noResults = false;
vm.isSearching = false;
vm.results = {
searchTerms: null,
documentCount: null,
documents: [],
queryTime : null,
searchTermGrams: null,
itemsPerPage: 10,
maxResults: 100
};
//autocomplete
vm.autocomplete = {
suggestions: [],
corrections: []
};
vm.showAutocomplete = false;