Summer Developer Summer Developer - 5 months ago 25
AngularJS Question

Template Provider Doesn't Fire $Scope Logic

I'm using angular ui-router and need to show a different template for a given state based on a variable in the parent (

body
) scope. But when I add this
$scope.data
conditional it doesn't fire. I don't even get the
console.log()
or any url change. :(

$stateProvider.state('map1', {
url: "/content/sectionI",
templateProvider: function($scope, $http, $stateParams) {
console.log("Wowie!",$scope.data);
if($scope.data.Section_I_Part_1_Complete == "0")
{
return $http({
method: 'GET',
url: 'http://example.com/contentMore',
params: {
request: "Section_I_Part_1_Complete",
part: "1"
}
}).then(function successCallback(html) {
return html.data;
});
}
else
{
return $http({
method: 'GET',
url: 'http://example.com/contentMore',
params: {
request: "Section_I_Unlocked",
part: "map"
}
}).then(function successCallback(html) {
return html.data;
});
}
},
controller: function($scope) {
$scope.activeSection.activeSection = "notNone";
}
})


How do I do it so that I can get the template to return based on the value of a variable in the parent scope?

Answer

Just use a service to store the data and inject that service.

templateProvider: function(myDataService) {

  var part = myDataService.Section_I_Part_1_Complete == "0" ? 1 : 'map';
  return $http.get('http://example.com/contentMore', {
    params: {
      request: "Section_I_Part_1_Complete",
      part: part
    }
  }).then(function(response) {
    return response.data;
  });
}