I'm facing an issue with exposing a field in my AngularJS controller. The problem arises when a JSON 'owner' object is returned by a webservice, containing a field named 'Cave'. If this 'Cave' field has a null, empty, or whitespace value, I want to hide an element in the view using ng-hide. My goal is to expose the 'hideCave' field from the controller as shown below:
function OwnerController($scope, OwnerFactory, $routeParams) {
if ($scope.owner == null) {
$scope.owner = OwnerFactory.getOwner($routeParams.id);
//$scope.hideCaveat = $scope.owner.Cave == undefined;
//Alerts 'Hide: {}?undefined'
alert('Hide: ' + JSON.stringify($scope.owner) + '?' + $scope.hideCaveat);
}
$scope.someButton = function () {
//Alerts full JSON string when clicked
alert('Hide: ' + JSON.stringify($scope.owner) + '?' + $scope.hideCaveat);
}
}
myApp.factory('OwnerFactory', function ($http) {
return {
getOwner: function (id) {
var url = 'api/Owner/' + id;
return $http.get(url)
.then(function (response) {
return response.data;
});
}
}
});
The data loads correctly, but I cannot retrieve a value from $scope.owner.Cave unless I add an ng-click event to trigger it.
Example of JSON returned from web service:
{"FirstName":"David","LastName":"Lynch","Street":"Oak Dr. 7","ZipCode":"90210","Town":"Beverly Hills","Email":"","Cave":"Do not sell this man any more drugs"}
What am I missing that's causing me not to receive the value?
Could my problem be related to creating a global function for my controller? Should I use myApp.controller instead?