I am a beginner with Angular and I'm trying to initialize a variable query as null and imgType as "illustration" in my controller. However, I keep getting an error:
Uncaught TypeError: Cannot set property 'query' of undefined".
Any idea what could be causing this issue? Everything else seems to be working fine.
My AngularJS version is 1.4.3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="ilustracka">
<!--Controller-->
<div ng-controller="SearchController as searchCtrl" ng-cloak>
<!--Searching-->
<form ng-submit="searchCtrl.search()">
<input type="text" ng-model="searchCtrl.query" placeholder="search...">
<select ng-model="searchCtrl.imgType">
<option value="illustration" selected>ILU</option>
<option value="image">IMG</option>
</select>
<button type="submit">SEARCH</button>
</form>
<!--Summary result--
<summary></summary>-->
<!--Result-->
<output></output>
</div>
<!--JavaScripts-->
<script src="libs/angularjs/angular.min.js"></script>
<script src="scripts/ilustracka.js"></script>
<script src="scripts/searchController.js"></script>
<script src="scripts/outputDirective.js"></script>
<script src="scripts/searchApiService.js"></script>
</body>
</html>
Controller
(function () {
'use strict';
angular
.module('ilustracka')
.controller('SearchController', SearchController);
//load service searchApi
SearchController().$inject['searchApi'];
function SearchController(searchApi) {
var vm = this;
/*
* vars
*/
vm.query = null;//search string
vm.imgType = 'illustration';//type of search image - (ilu|img)
vm.images = null;//result of query - empty object
vm.result = null;//showing result or info message
/*
* functions
*/
vm.search = search;
function search(){
//!empty searchQuery
if(vm.query){
searchApi.searchImg(vm.query, vm.imgType);
vm.images = searchApi.getImages();
vm.result = searchApi.getResult();
}
}
}
}());
ilustracka
(function(){
"use strict";
angular
.module("ilustracka", []);
}());