I am currently working on implementing a basic recent searches list feature on my website. The idea is that when the user clicks on the search button, two inputs are combined and added to an array named "recentSearchItems". However, despite updating this array in the homeCtrl, the changes are not reflected in the directive.
Here is the code snippet from index.html:
<body ng-controller="HomeCtrl">
<div class="outer-wrapper">
<div class="main-wrapper" ng-class="{'search-page': searchClicked}" ng-show="uiRouterState.current.name == 'home'">
<div class="home-logo" ng-class="{'animate': searchClicked}">
</div>
<div class="home-content-wrapper" ng-class="{'animate': searchClicked}">
<div class="main-header" ng-class="{'animate': searchClicked}">
Lorem ipsum dolor sit!
</div>
<div class="main-large-text" ng-class="{'animate': searchClicked}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<form class="form-elements">
<input type="text" class="large-textbox" name="looking-for" placeholder="I am looking for" ng-model="placeKeyword">
<input type="text" class="medium-textbox" name="place" placeholder="Istanbul" ng-model="placeNear" style="margin-left: 10px;">
<button ui-sref="home" class="search-btn" style="margin-left: 10px;" ng-click="startSearch()">
<span></span>
</button>
</form>
</div>
</div>
<div ui-view></div>
<div class="footer-wrapper">
<div class="footer-links">
<a href="#">About us</a>
<a href="#">Contact</a>
<a href="#">Blog</a>
</div>
</div>
</div>
</body>
The content html (to replace the "ui-view" directive) looks like this:
<div class="search-items" ng-show="uiRouterState.current.name == 'home'">
<div class="places-list">
<place-grid ng-repeat="place in places"></place-grid>
</div>
<recent-searches recent-search-items="recentSearchItems"></recent-searches>
</div>
Snippet from homeCtrl:
placesApp.controller("HomeCtrl", ["$scope", "$state", "FoursquareApiService", ($scope, $state, FoursquareApiService) => {
$scope.uiRouterState = $state;
$scope.searchClicked = false;
$scope.recentSearchItems = [];
$scope.startSearch = () => {
if($scope.placeNear) {
$scope.addToSearchHistory($scope.placeKeyword, $scope.placeNear);
$scope.searchClicked = true;
var promise = FoursquareApiService.getPlaces($scope.placeNear, $scope.placeKeyword);
promise.then(
function(response) {
$scope.places = response;
},
function(error) {
console.log("Couldn't get the places data: " + error)
}
);
}
};
$scope.addToSearchHistory = (placeKeyword , placeNear) => {
$scope.recentSearchItems.push(placeKeyword + " in " + placeNear);
};
}]);
Directive section:
placesApp.directive("recentSearches", () => {
return {
restrict: "E",
replace: true,
scope: {
recentSearchItems: "="
},
templateUrl: "views/recent-searches.html"
}
});
Template for the directive:
<div class="recent-searches">
<h3>RECENT SEARCHES</h3>
<hr class="under-header">
<div class="recent-search-items" ng-repeat="recentSearchItem in recentSearchItems">
<p ng-bind="recentSearchItem"></p>
<hr>
</div>
</div>