Can't bind data correctly from controller to custom template template, Angular
So I have the code for the search string in my own template, which I have in the custom directive. Then I put this directive in my Navbar template.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" ng-model="searchText">
</div>
<button type="submit" class="btn btn-default" ng-click="go('/searchResults')">Submit</button>
</form>
...
.state('searchResults', {
url: '/searchResults',
templateUrl: 'templates/searchResults.html',
controller: 'searchController'
})
}]).
directive('searchBar', function() {
return {
restrict: 'E',
templateUrl: 'templates/search.html',
controller: "searchController"
}
});
My SearchController is handling scope for this search string, but I am having some problems binding data to another template, which is my search query template. My SearchController calls a service I wrote that fetches some data and works fine. However, when I try to bind data to my SearchResults page, angular does not bind any of the data received from the service (although the console will remove the correct data from it).
Name: {{player.playerName}}<br>
Link: {{player.link}}<br>
Things: {{things}}<br>
controller:
angular
.module('app')
.controller('searchController', ['$scope',"$http","$location", "PlayerDAO", function($scope, $http, $location, PlayerDAO){
$scope.things="stuff";
$scope.go = function ( path ) {
if(checkSearchBar()){
$location.path( path );
PlayerDAO.getPlayers($scope.searchText).then($scope.postPlayerToResultsPage, onError);
}
};
$scope.postPlayerToResultsPage=function(result){
$scope.player=result;
$scope.things="Hooray, it worked";
$scope.player.playerName;
console.log(result);
};
}]);
Oddly enough for me, it will bind any data that is not in the function I'm using to get the data (ie {{things}} bind), but any data in my "postPlayerToResultsPage" function is not rendered by Angular. If I take the code for the search bar and put it directly on the search results page, the navigation bar that appears on that page works flawlessly, however I need the search bar to be in my main navigation template, all pages.
source to share
I suspect your data is optional due to the prototypical nature of your $ scope variable. Try to use controllerAs syntax for data binding to avoid $ scope ambiguity. eg.
:
controller: 'searchController',
controllerAs: 'searchCtl'
controller:
var controller = this;
$scope.postPlayerToResultsPage=function(result){
controller.player=result;
controller.things="Hooray, it worked";
controller.player.playerName;
console.log(result);
};
HTML:
Name: {{searchCtl.player.playerName}}<br>
Link: {{searchCtl.player.link}}<br>
Things: {{searchCtl.things}}<br>
source to share